DOM树深度≥7是网页组件HTML质量劣化的明确信号，需通过Chrome DevTools右键节点→“Show DOM properties”查看depth值确认，≥7即超标；语义化标签可压缩层级路径，而display:contents不改变DOM深度。
DOM树深度 ≥ 7 是网页组件HTML代码质量劣化的明确信号，不是“建议优化”，而是已触发FCP延迟、选择器匹配变慢、辅助技术失效等实际问题。
怎么快速测出 DOM 树深度是否超标
打开 Chrome DevTools → Elements 面板 → 右键任意节点 → 点击 Show DOM properties → 查看 depth 值。只要有一个节点 depth ≥ 7，就说明当前组件的HTML结构已超出浏览器高效处理阈值。
- 不要依赖“看起来不深”的直觉：一个
<div><div><div><div><div><div><p>文本</p></div></div></div></div></div></div>就是 depth=7 - 检查范围必须覆盖整个组件容器，而非只看顶层 wrapper；
main或section内部嵌套过深同样计入 -
display: contents不降低depth值——它只影响渲染树，DOM树深度不变
语义化标签为什么能直接降 depth
语义化标签本身不减少字符数，但能替代多层无意义 <div> 嵌套，从而压缩树的实际层级路径。
-
<article><header><h2>标题</h2></header><p>内容</p></article>的 depth 通常为 4～5 - 等价的
<div class="article"><div class="header"><div class="title"><h2>标题</h2></div></div><div class="content"><p>内容</p></div></div>很容易到 depth=7+ - 更关键的是：CSS选择器如
article h2比div div div h2少 2～3 层祖先回溯，querySelectorAll耗时下降明显
内联 CSS 和同步 script 如何把 depth 问题放大
DOM深度本身不会阻塞解析，但当它与阻塞资源共存时，会显著延长 FCP 触发时机——因为浏览器必须先建完那棵深树，才能开始样式计算。
立即学习“前端免费学习笔记（深入）”；
-
<style>内联超过 10–15 KB（gzip 后）会拖慢 HTML 解析器，尤其在低端 Android 设备上，解析耗时可增加 80ms+，而 depth ≥ 7 会让该延迟乘以 1.5～2 倍 -
<script>放在<head>且没加async或defer，会暂停解析；此时若已解析到 depth=6 的节点，还需等脚本执行完才继续往下建树，FCP 直接卡住 - SSR 输出的 HTML 若含
data-reactroot且父容器 depth ≥ 8，hydration 阶段的 Tree Construction 耗时会线性增长，Worker 并行解析无效
DOMParser 不能绕过深度问题
有人试图用 DOMParser.parseFromString() 在 Worker 中解析 HTML 片段再拼入主文档，以为能“分块降压”——这是错的。
-
DOMParser返回的是孤立 DocumentFragment，没有全局 CSSOM、无渲染上下文，getComputedStyle()返回空值，事件也不绑定 - 必须调用
appendChild()才能接入主 DOM，此时仍要走完整 Tree Construction 流程，深度约束照旧 - 实测表明：当主文档平均 depth ≥ 8，
appendChild()单次耗时比 depth=4 高 2.3 倍，Worker 提前解析毫无收益
真正有效的控制点只有三个：删掉冗余 <div>、用语义标签重写结构、确保首屏 HTML 不含阻塞脚本或巨型内联样式——其他所有“加速方案”在 depth ≥ 7 时都只是掩盖症状。
