DOM嵌套超6层会触发强制同步布局，导致滚动或动画卡顿；因CSS选择器从右往左匹配，深层回溯路径长、开销指数增长，且易引发合成层分裂与重排。
DOM嵌套超过6层会触发强制同步布局
只要在滚动或动画中读取 offsetHeight、getBoundingClientRect() 或 clientWidth，浏览器就可能被迫提前执行重排（reflow）。深层嵌套会让这个过程更慢——不是因为“多几层div”，而是因为样式匹配从右往左回溯时路径变长，尤其当页面有大量 span.title 这类泛匹配节点时，开销呈指数级增长。
- Chrome DevTools 的 “Layers” 面板里出现意外的合成层分裂，往往就是深层嵌套 +
will-change或transform滥用导致的 - 用
overflow: hidden或::after { content:""; display:table; clear:both; }替代<div style="clear:both"> 这类纯功能包裹 <li>Vue/React 中慎用 <code>v-html或dangerouslySetInnerHTML，它们可能带入不可控的深层结构；优先用组件化输出控制根节点数 - 用
<header></header>、<nav></nav>、<main></main>、<section></section>替代<div class="header"> 等命名式包裹 <li>检查 Elements 面板，Ctrl+F 搜 <code><div></div>或class=""，再结合 Coverage 面板看哪些 CSS 规则从未命中 - 服务端渲染（SSR）时避免生成带空属性的节点，如
<div data-v-xxx="">，它们仍计入 DOM 树并参与样式计算 <h3>Flexbox/Grid 能绕过容器依赖实现扁平结构</h3> <p>传统浮动或 inline-block 布局常靠多层 <code>div控制对齐和间距，结果是结构越来越深。Flexbox 和 Grid 本质是“让父元素直接管理子元素布局”，不需要中间层做协调。- 把
display: flex或display: grid直接加在语义标签上，比如<nav></nav>或<article></article> - 删除仅为撑开高度或设置 margin/padding 而写的额外
div；用gap、justify-content、padding在语义容器上直接控制 - React/Vue 组件返回尽量用 Fragment（
）而非单个div包裹，避免虚拟 DOM 多一层
scroll 回调里反复查
.active会放大嵌套危害如果 scroll 事件里写
document.querySelector('.active')，每次都会从根开始遍历整个 DOM 树。当.active出现在第7层嵌套里，且页面有几十个同类节点时，性能下降明显。立即学习“前端免费学习笔记（深入）”；
- 缓存查询结果：把
document.querySelector('.active')提到初始化阶段，后续只更新引用 - 改用事件委托：监听父容器，用
e.target.matches('.active')判断，避免全局查找 - 右侧选择器越唯一越好：
.user-name比div p span快得多，后者要遍历全部span再逐层验证祖先
- 把
语义化标签能直接压到3层以内
不是所有嵌套都该删，但很多是历史遗留的“安全包裹”。比如 <div class="wrapper"><div class="inner">…</div></div> 这种只为兼容旧IE的双层空容器，现在完全没必要。真正影响性能的是无语义、无样式、不可见的空节点。
