dom深度超6层时fcp延迟跃升至200ms+，实测拐点；用node.depth字段精准识别深度≥6节点；display:contents可降深而不改结构；语义化标签虽不省解析时间，但缩短选择器匹配、提升无障碍访问、减少hydration抖动。
DOM 深度超过 6 层时，低端安卓设备上 FCP 延迟会从基线跳升至 200ms+，这不是估算，是实测拐点。
查 node.depth 值比数缩进更可靠
浏览器解析 HTML 是逐字符流式进行的，每层嵌套都增加节点创建、父级挂载和样式匹配路径长度。肉眼数 <div> 缩进容易漏掉条件渲染分支或 SSR 注入的 wrapper，结果误判“只有 4 层”。
<ul>
<li>打开 Chrome DevTools → Elements 面板，右键任意节点 → <code>Show DOM properties，直接看 node.depth 字段值
(function walk(node, level = 0) {
if (level >= 6) console.log(`深度 ${level}:`, node);
for (let child of node.children) walk(child, level + 1);
})(document.body);
node.depth 从 document 开始计为 0，所以 body 是 1，main 是 2，依此类推用 display: contents 抹除无意义 wrapper
很多嵌套不是为了布局，只是为了加 class 或方便 JS 选中，比如 <div class="card"><div class="card-body"><p>text</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div></div></div>。这类结构在低端机上会放大事件冒泡延迟和 getComputedStyle() 耗时，但又不能直接删——怕破坏 CSS 依赖。
-
display: contents让该元素不生成盒模型，子元素直接成为父容器的子节点，DOM 树深度降 1，但 HTML 结构不变 - Safari 15.4+、Chrome 84+、Firefox 70+ 支持；旧版 WebView 可用
data-contents+ JS 回退处理 - 慎用于
<table> 内部或含 <code>position: absolute子元素的容器，可能破坏定位上下文语义化标签不省解析时间，但绕过三类硬开销
写
<section></section>和写<div class="section"></div>对 Tokenization 阶段耗时几乎无差别，但它能避开三类真实存在的性能瓶颈：- 选择器匹配变短：
article h2比div div div h2少两次祖先遍历，CSS 引擎无需向上查 3 层 - 屏幕阅读器跳转更快，避免因 DOM 深度过高导致 VoiceOver 在焦点树中卡顿或跳过目标
- SSR 框架（如 Next.js）对
<main></main>、<nav></nav>等标签自动注入loading="lazy"和宽高属性，减少 hydration 后的 layout thrashing
真正卡住低端手持终端的，从来不是某一行 JS，而是你没意识到那 7 层
<div> 已让浏览器在解析阶段多跑了三轮父子关系绑定——而且这个成本在每次 <code>offsetHeight、getBoundingClientRect()或事件冒泡时都会复现。 - 选择器匹配变短：
