dom深度超6层会引发性能与可访问性问题，应通过chrome devtools的node.depth定位冗余层（≥7需优化），用css伪元素、gap、outline等替代无语义包裹，同时避免选择器嵌套导致回溯开销。
多层嵌套不是“写得全”，而是“没想清”——DOM深度超过6层时，getComputedStyle()在低端机上卡顿超80ms，querySelectorAll遍历变慢，屏幕阅读器跳过legend，甚至replaceChildren()都可能因深层引用导致内存驻留。重构不是删标签，是让每个标签都有不可替代的语义或功能价值。
怎么快速定位真正冗余的嵌套层
别靠肉眼数缩进，HTML源码和最终渲染DOM常不一致。必须用真实DOM树验证：
- 打开Chrome DevTools → Elements面板，右键任意元素 → Show DOM properties，重点看
node.depth值：≥7就该动手；≥10已是高危 - 运行
document.querySelectorAll('div:not([class]):not([id]):not([style]):not([onclick])')揪出纯包裹型div（仅调试用，勿上线） - 对CMS/低代码输出结构（如
div.wrapper > div.container > div.row > div.col），通常只需保留最内层 - 检查
childElementCount：单个section下超过50个子元素，大概率存在结构性冗余
哪些视觉效果根本不需要额外DOM节点
很多“看起来需要一层包裹”的场景，CSS完全能接管，且零节点开销：
- 分隔线、角标、小图标：用
::before/::after伪元素生成，避免div.divider - 间距控制：优先用
display: grid或flex的gap属性，而不是塞div占位 - 外边框模拟：用
outline+outline-offset，比套一层div更轻量 - 带图标的输入框：用
label > svg + input直接组合，别写三层嵌套div > div > input - 卡片背景+阴影：直接在
p或section上设border-radius、box-shadow、overflow: hidden，无需card-wrapper
为什么删不等于解决问题
删掉三层嵌套div，但CSS还写着.page .header .nav .item a，浏览器照样从每个a开始逐层往上验证.page是否存在——真正拖慢的是选择器回溯路径，不是DOM标签数本身。
- DOM扁平但选择器嵌套5层，性能损耗 ≈ DOM嵌套5层 + 选择器嵌套5层
- SCSS里滥用
&嵌套，编译后生成.theme-dark .menu .menu__item:hover，仍是4层匹配链
- BEM类名（如
nav__item--active）本质是把结构关系“编译”进类名，让浏览器只查单类，跳过所有向上遍历
- 用
@at-root主动提级样式，比如把修饰符写成.menu__item--hover，而非依赖父级作用域
嵌套
删掉三层嵌套div，但CSS还写着.page .header .nav .item a，浏览器照样从每个a开始逐层往上验证.page是否存在——真正拖慢的是选择器回溯路径，不是DOM标签数本身。
- DOM扁平但选择器嵌套5层，性能损耗 ≈ DOM嵌套5层 + 选择器嵌套5层
- SCSS里滥用
&嵌套，编译后生成.theme-dark .menu .menu__item:hover，仍是4层匹配链 - BEM类名（如
nav__item--active）本质是把结构关系“编译”进类名，让浏览器只查单类，跳过所有向上遍历 - 用
@at-root主动提级样式，比如把修饰符写成.menu__item--hover，而非依赖父级作用域
嵌套
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
