HTML结构冗余会显著增加低端设备CPU解析负载，导致FCP延迟200ms+、掉帧或交互卡顿；DOM深度≥7属高风险，需压至6以内、节点总数控在800以下，并用语义化标签降低深度与匹配开销。
HTML结构冗余会直接抬高低端移动设备的CPU解析负载，不是“慢一点”，而是让解析器在主线程上多跑几十毫秒——这足以让FCP延迟200ms+、触发掉帧、甚至卡住关键交互。
Chrome DevTools里一眼识别DOM深度超标
别数源码里的
嵌套了几层，浏览器不看源码，它看最终生成的DOM树。打开DevTools → Elements面板，右键任意节点 →
Show DOM properties，重点看node.depth值：
- ≥7：已进入高风险区，低端安卓机实测FCP平均延迟180–220ms
- =6：临界值，需结合Layers面板查合成层碎片（大量小方块=渲染子树分裂）
- ≤5：相对安全，但若
document.querySelector('body').children[0].children.length远大于视觉区块数（如首页返回12却只看到header/main/footer），说明存在横向冗余包裹
语义化标签不是为了SEO，是绕过解析器低效路径
<section></section>、<article></article>、<main></main>这些标签本身不加速解析，但它们天然降低DOM深度、减少节点总数，并让CSS选择器匹配更短——比如main h1比div div div h1少两次祖先遍历。更重要的是：
- 它们不触发额外样式计算开销，而三层
<div class="wrapper"><div class="inner"><div class="content"></div></div></div>会强制浏览器多建三次节点+三次父级挂载 -
<table><td><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></td></table>这种写法在旧款WebView中极易触发同步Layout，因表格单元格内样式计算本就重，嵌套后无法流式布局 -
<header></header>必须嵌套在节段容器（<article></article>、<section></section>或）内才有语义；单独丢在DOM底部不包裹内容，部分安卓WebView会忽略其结构意义
script位置不当会让CPU空等，和代码体积无关
即使只有1KB的<script></script>，只要它没加defer或async且放在里，浏览器就必须暂停HTML解析、下载、执行完才能继续——此时CPU在等IO，但主线程被占着，什么都干不了。
- 纯埋点/统计脚本：加
defer，保证顺序又不阻塞 - 按钮点击绑定类逻辑：可用
async，但注意它可能在DOMContentLoaded前运行，document.getElementById('btn')大概率返回null - 操作首屏DOM的脚本（如轮播初始化）：必须放
前，别信“DOMContentLoaded更快”的说法——实测晚100ms加载，LCP就晚100ms
内联CSS超10KB会让解析器在文本扫描阶段卡住
浏览器解析HTML时，遇到<style></style>会立即切换到CSS解析器，同步处理全部内容。gzip后超10–15KB的内联CSS，在低端Android设备上可多耗80ms+，这不是网络问题，是CPU在字符串匹配和规则树构建上花了真时间。
- 单个
<style></style>块超过1KB，就该拆成外部<link rel="stylesheet"> - CSS-in-JS生成的内联样式同理，尤其避免在SSR中注入大段动态样式
- 用
performance.mark('html-start')和performance.mark('html-end')夹住HTML主体，可实测纯解析耗时（iOS Safari不支持performance.measure，需用Date.now()粗略估算）
真正难优化的不是某段JS或某张图，而是那些看起来“无害”的嵌套<div>——它们不报错、不警告、Lighthouse也未必标红，但会在低端设备上悄悄吃掉200ms的主线程时间。重构时别只盯着删代码，重点是把<code>depth压到6以内、把节点总数控在800以下、让每个标签都有明确的语义边界。
