最准方式是用document.querySelectorAll('*').length查总节点数，右键节点看node.depth查深度；节点超2000或深度≥6会显著拖慢渲染性能，深度影响递归路径长度，语义标签可降低复杂度且提升稳定性。
怎么快速测出HTML节点总数和深度？
别靠肉眼数缩进，也别信“看着不多”——构建后HTML常因框架包裹、模板拼接膨胀。最准的方式是直接在浏览器控制台跑两行脚本：document.querySelectorAll('*').length 查总节点数；右键任意节点 → “Show DOM properties” 看 node.depth 值。实测拐点很明确：节点超2000，layout耗时从15ms跃升至60ms+；深度≥6，getComputedStyle() 耗时就开始翻倍。
为什么深度比节点数更危险？
深度影响的是浏览器递归路径长度，不是总量。100个平级 div 远比10个嵌套5层的结构轻量。每深一层，querySelector 和 getBoundingClientRect() 就得多一次向上回溯，JS-DOM交互桥接延迟不可控。尤其在低端安卓机上，深度达12时单次 getComputedStyle() 可卡顿80ms以上。常见坑包括：body > div > div > div > .content > .list > .item 这种纯class堆叠结构，深度轻松到7；<table>单元格里再套<code><div>，表格样式计算本就重，嵌套后极易触发同步Layout。
<h3>语义标签真能降复杂度吗？</h3>
<p>能，而且不增加解析开销。<code><section></section>、<main></main>、<article></article> 不是<div>的花哨替代品，它们天然缩短CSS选择器路径、压低DOM节点总数（移动端稳定底线是800以内），还让<code>document.querySelector('header')这种调用稳如磐石——class可能被删、被覆盖，但语义标签只要结构没动，接口就一直可用。注意两个硬约束：<main></main>必须全局唯一且不能嵌套在<section></section>或<article></article>内；<section></section>必须含至少一个<h1></h1>–<h6></h6>，否则语义失效。
哪些地方最容易藏深层嵌套？
富文本渲染、SSR输出、第三方SDK注入是三大高危区。比如 v-html 或 dangerouslySetInnerHTML 渲染的编辑器内容，可能带入几十层 <div>
<p></p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>；Next.js/Nuxt 生成的HTML若含 data-reactroot 或 _next 标记，得检查其父容器是否无意加深了嵌套；统计脚本或客服组件常悄悄插入多层包裹。排查时直接运行这段脚本：(function walk(node, level = 0) { if(level >= 6) console.log(`深度 ${level}:`, node); for(let child of node.children) walk(child, level + 1); })(document.body); ——它会把所有≥6层的节点打出来，比人工扫快十倍。
真正难的不是发现深层节点，而是判断哪一层该删、哪一层该换语义标签、哪一层其实是业务逻辑必需的——这时候得回到具体渲染意图，而不是只盯着数字优化。
