getMaxDOMDepth() 可检测页面最大 DOM 深度，但默认排除 SCRIPT/STYLE 等非渲染节点，需手动覆盖 SSR/Vue 特殊节点；深度 >12 时应定位冗余 wrapper 层，用 DOMParser + replaceChildren 安全压平，并验证选择器、内存泄漏及无障碍兼容性。
怎么用脚本检测深层DOM节点
直接运行 getMaxDOMDepth() 函数就能拿到当前页面最大深度，但它默认把 SCRIPT、STYLE 等非渲染节点排除在外，避免误判。你得先确认它是否覆盖了你关心的结构——比如 SSR 注入的 div[data-nextjs-root] 或 Vue 的 div[data-v-xxx]，这些虽不显眼，但会真实计入深度。
常见误判点：
- 用
document.querySelectorAll('*').length代替深度检测——它只统计节点总数，不反映嵌套层级，对性能优化没指导意义 - 在 DevTools Console 直接粘贴未加保护的递归函数——超深树可能卡死标签页，建议加递归阈值（如限制最大调用栈深度为 30）
- 忽略 Shadow DOM：若页面含自定义元素或 Web Components，需手动检查
node.shadowRoot，否则深度统计漏掉封闭子树
检测到深度 >12 后怎么自动重整
检测只是起点，重整才是关键。别一上来就删 div，先定位“无效包裹层”：那些 class 名含 wrapper、inner、container 且连续出现 3 层以上的路径，大概率是冗余结构。
安全重整策略：
立即学习“前端免费学习笔记（深入）”；
- 用
DOMParser解析原始 HTML 字符串，再遍历 AST 替换节点，而非正则替换——<div class="card-body"><div class="card-content">...</div></div>这类结构，必须靠 DOM 树上下文判断能否合并，正则会把<script>console.log('');</script>一起劈开 - 只对满足以下全部条件的节点执行压平：
node.children.length === 1且node.firstElementChild.tagName !== 'SCRIPT'且getComputedStyle(node).display === 'block'（说明它没承担特殊布局职责） - 重整后立即用
document.querySelector('.a .b .c')测试选择器是否仍生效——很多 JS 逻辑依赖深层 class 路径，直接删节点会导致功能断裂
replaceChildren() 在重整中怎么用才不翻车
replaceChildren() 不是 innerHTML 的平替，它是重构 DOM 结构时切断旧引用链的必要手段，但用错就等于白干。
实操红线：
- 传字符串会当纯文本插入：
el.replaceChildren('<div>foo</div>')→ 页面显示源码，不是渲染 DOM；必须先用DOMParser解析，再取doc.body.children传入 - 旧环境无降级：IE 和部分 Android WebView 不支持，得前置检测
if ('replaceChildren' in Element.prototype)，否则 fallback 到while (el.firstChild) el.removeChild(el.firstChild) - 别在循环里反复调用：对列表项逐个
replaceChildren()比批量创建 DocumentFragment 再一次性挂载慢 3–5 倍，尤其在低端设备上
重整后怎么验证内存没泄漏
删掉 DOM 节点 ≠ 释放内存。只要 JS 还持有对它的引用，整条 parentNode 链都会驻留，包括早已移除的祖先节点。
快速验证法：
- 操作前执行
$$('*').length记下基准值，重整后再跑一次，若稳定增长，说明有 Detached 节点残留 - 重点排查：
ref.current（React）、document.querySelector('.deep-item')返回值被闭包长期持有、Map缓存未在节点移除时delete() - 滚动监听等长生命周期回调里，避免写
e.target.parentElement.parentElement.parentElement——这种硬编码路径一旦节点被重整，引用直接失效，还拖着整条链不释放
真正难的不是把三层 div 压成一层，而是确保所有 JS 查询路径、样式继承、无障碍属性都同步适配——重整后不测 axe.run()，等于只修了半边墙。
