浏览器解析html时每层需创建节点、匹配结束标签、触发样式计算，5层以上嵌套在低端安卓机致fcp延迟20–50ms；超6层应警觉，可通过devtools查看node.depth值、layers面板查合成层碎片、document.queryselector('body').children[0].children.length验证冗余包裹。
浏览器解析HTML时，每层都在干啥
不是“多写几个
就卡”，而是浏览器在构建DOM树时，对每个开始标签都要做三件事：创建节点、匹配结束标签、触发样式计算。嵌套越深，匹配路径越长——比如<div><div><div><p></p></div></div></div>，解析器得记住三层未闭合的<code><div>，再逐层回退确认闭合顺序。实测显示，5层以上嵌套在低端安卓机上会让首次内容绘制（FCP）延迟20–50ms。
<p>更隐蔽的问题是：深层嵌套常伴随<code>position: relative叠加、<code>overflow: hidden</code>嵌套或<code>transform</code>滥用，这些会强制浏览器创建额外合成层（Layers面板里能看到一堆小方块），进而放大重排开销。</code></p>
<h3>怎么一眼看出你写的HTML嵌套过深</h3>
<p>别看源码，看浏览器最终生成的DOM树：</p>
<ul>
<li>打开Chrome DevTools → Elements 面板，右键任意节点 → “Show DOM properties”，查<code>node.depth</code>值，超过6就该警觉</li>
<li>切换到 Layers 面板，如果看到大量重叠、尺寸零碎的合成层，基本就是嵌套+定位共同导致的渲染子树碎片化</li>
<li>在Console运行<code>document.querySelector('body').children[0].children.length</code>，如果返回值远大于视觉区块数（比如首页只该有header/main/footer三块，却返回8），说明冗余包裹严重</li>
</ul>
<h3>用语义标签和Flex/Grid直接砍掉冗余层</h3>
<p>不是删代码，是换写法。一个三列布局，老写法要三层：</p>
<pre class="brush:php;toolbar:false;"><div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>；新写法一层搞定：
<pre class="brush:php;toolbar:false;"><main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"><section>A</section><section>B</section><section>C</section></main>
关键点：
<main>、<code><section></section>、<nav></nav>默认不带margin/padding，比<div class="main">少一层样式重置
<li>React/Vue中启用<code>>（Fragment）或让v-for直出子元素，跳过组件默认根容器- 慎用
display: contents：它虽让父元素不参与盒模型，但IE全系不支持，且会剥离可访问性树节点
哪些嵌套组合会触发隐式重排
有些写法看似合法，实则让浏览器在解析阶段就“偷偷干活”：
-
<p></p>里放<div>、<code><ul></ul>或<h3></h3>：全部非法，浏览器会立即中断<p></p>、补全闭合，再新开一个<p></p>，导致DOM树分裂
<table>里没用<code><tbody>包<code><tr>：浏览器自动插入匿名<code><tbody>，可能破坏<code>table-layout: fixed的列宽锁定
-
<header></header>里塞<main></main>：语义冲突，部分引擎降级为普通<div>，失去内置布局优化提示
<p>真正难处理的不是嵌套层数本身，而是嵌套位置——比如把<code><div>插在<code><p></p>中间，浏览器修复动作会让整个
不是“多写几个
就卡”，而是浏览器在构建DOM树时，对每个开始标签都要做三件事：创建节点、匹配结束标签、触发样式计算。嵌套越深，匹配路径越长——比如
<div><div><div><p></p></div></div></div>，解析器得记住三层未闭合的<code><div>，再逐层回退确认闭合顺序。实测显示，5层以上嵌套在低端安卓机上会让首次内容绘制（FCP）延迟20–50ms。
<p>更隐蔽的问题是：深层嵌套常伴随<code>position: relative叠加、<code>overflow: hidden</code>嵌套或<code>transform</code>滥用，这些会强制浏览器创建额外合成层（Layers面板里能看到一堆小方块），进而放大重排开销。</code></p>
<h3>怎么一眼看出你写的HTML嵌套过深</h3>
<p>别看源码，看浏览器最终生成的DOM树：</p>
<ul>
<li>打开Chrome DevTools → Elements 面板，右键任意节点 → “Show DOM properties”，查<code>node.depth</code>值，超过6就该警觉</li>
<li>切换到 Layers 面板，如果看到大量重叠、尺寸零碎的合成层，基本就是嵌套+定位共同导致的渲染子树碎片化</li>
<li>在Console运行<code>document.querySelector('body').children[0].children.length</code>，如果返回值远大于视觉区块数（比如首页只该有header/main/footer三块，却返回8），说明冗余包裹严重</li>
</ul>
<h3>用语义标签和Flex/Grid直接砍掉冗余层</h3>
<p>不是删代码，是换写法。一个三列布局，老写法要三层：</p>
<pre class="brush:php;toolbar:false;"><div class="row">
<div class="col">A</div>
<div class="col">B</div>
<div class="col">C</div>
</div>；新写法一层搞定：
<pre class="brush:php;toolbar:false;"><main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"><section>A</section><section>B</section><section>C</section></main>
关键点：
<main>、<code><section></section>、<nav></nav>默认不带margin/padding，比<div class="main">少一层样式重置 <li>React/Vue中启用<code>>（Fragment）或让v-for直出子元素，跳过组件默认根容器- 慎用
display: contents：它虽让父元素不参与盒模型，但IE全系不支持，且会剥离可访问性树节点 -
<p></p>里放<div>、<code><ul></ul>或<h3></h3>：全部非法，浏览器会立即中断<p></p>、补全闭合，再新开一个<p></p>，导致DOM树分裂 <table>里没用<code><tbody>包<code><tr>：浏览器自动插入匿名<code><tbody>，可能破坏<code>table-layout: fixed的列宽锁定-
<header></header>里塞<main></main>：语义冲突，部分引擎降级为普通<div>，失去内置布局优化提示 <p>真正难处理的不是嵌套层数本身，而是嵌套位置——比如把<code><div>插在<code><p></p>中间，浏览器修复动作会让整个参与重排，而不是只动那个段落。
哪些嵌套组合会触发隐式重排
有些写法看似合法，实则让浏览器在解析阶段就“偷偷干活”：
