DOM深度超6层或节点总数超2000即属失控，应立即通过Chrome DevTools右键节点查node.depth值及document.querySelectorAll('*').length验证。
怎么一眼识别DOM结构是否已经失控
别等上线后被用户投诉卡顿，打开 Chrome DevTools → Elements 面板，右键任意父节点 → Show DOM properties，重点看 depth 值：超过 6 就危险；再运行 document.querySelectorAll('*').length，整页超 2000 节点，低端设备 layout 就可能指数级变慢。
更隐蔽的问题是浏览器悄悄修正了你的 HTML：比如在 <p> 里写了 <div>，W3C 规范根本不允许，DevTools 里看到的 DOM 已被自动“修复”——实际结构和你写的源码完全不一致。这时右键父容器 → Edit as HTML，删一个字符再回车，如果子结构整体跳出去，说明原始嵌套已被浏览器打断。
哪些嵌套模式必须立刻砍掉
不是所有语义标签都安全，真正拖垮结构的是“为样式硬加的包裹层”。高频冗余模式包括：
-
<div><div><div><input></div></div></div>—— 用<label class="input-group"><input></label>一行解决 - 卡片组件里的
card-inner→card-body→card-content—— 多数情况单层<article class="card">+ CSS Grid 就够 - SSR 模板生成的空 wrapper：
<div class="page"><div class="main"><div class="container"><div class="row"><div class="col">—— 如果只有 1 处用到col类，其余全是占位 - 为图标单独包一层
<div>：<div><svg></svg></div><div>文字</div>—— 改用<span><svg></svg>文字</span>或伪元素
用CSS替代DOM节点的实操边界
不是所有视觉结构都能靠CSS扛住，关键看是否涉及交互、可访问性或内容语义。以下能安全替换：
立即学习“前端免费学习笔记（深入）”；
- 分隔线：用
::before或<hr>，别写<div class="divider"></div> - 间距：优先用
gap（Grid/Flex），而不是塞<div style="height: 16px"></div> - 外边框效果：用
outline + outline-offset模拟，比套一层<div>更轻 - 带图标的输入框：用
<label><svg><input></label>，而非三层div嵌套
但以下不能动：<form> 必须包裹 <input> 才能提交；<table> 的 <tr><td> 结构不能用 div 模拟（语义+可访问性崩坏）；<nav> 里的链接列表不能全扔进一个 <div>（屏幕阅读器会丢失导航上下文）。
重构时最容易忽略的隐藏陷阱
很多团队删完 div 后性能没改善，是因为忽略了三类隐形结构膨胀：
- SSR 渲染注入的不可见 wrapper：它们不渲染，但仍参与 DOM 构建和样式计算，必须在服务端模板里清理
-
v-html或innerHTML插入的服务端 HTML 片段：可能自带空格、注释、冗余标签，插入前务必用DOMPurify.sanitize()过滤 - 动态插入大量节点时没用
DocumentFragment：循环appendChild100 次 = 触发 100 次 layout 计算，一次缓存再插入才合理
压平 DOM 深度不是目标，让浏览器少做一层继承回溯、少一次选择器匹配、少一次布局上下文创建，才是真实收益。改完之后，一定要在 Performance 面板录一次加载，盯着 Layout 时间有没有明显下降——数字不会骗人。
