HTML嵌套冗余是首屏慢的主因，每多100个DOM节点解析慢20–40ms；应通过DevTools断点、CSS选择器搜索、Layers面板、语义化替换、非法嵌套检查及清理模板残留来精简结构。
HTML结构本身就会拖慢首屏，不是JS或CSS的问题——DOM节点每多100个，解析就慢20–40ms。删嵌套比加优化更直接有效。
怎么快速定位冗余嵌套
别只看源码，要盯浏览器最终生成的 DOM 树。DevTools 的 Elements 面板里右键任意父级 <div> → “Break on subtree modifications”，然后交互触发渲染（比如点按钮、展开菜单），如果断点停在某层 wrapper 而非目标元素，说明那层就是纯摆设。
- 用 CSS 选择器搜索
div[class]，逐个检查对应 class 是否真有样式规则；没匹配的，整行<div class="xxx">连带闭合标签一起删 - 特别注意 CMS 或低代码导出的
<div data-id="xxx">，只要没 JS 绑定，全删 - 打开 Layers 面板，看是否有大量小尺寸、边界重叠的合成层——这是嵌套+非法结构共同导致的渲染子树碎片化信号
语义化标签不是为了SEO，是为了解析提速
浏览器对 <header>、<nav>、<main> 等语义标签有轻量级预判优化，而一堆同级 <div> 会让解析器反复回溯确认层级关系。
- 把
<div class="main-header">直接换成<header class="main-header">，类名保留（样式照用） -
<div class="nav-list">→<nav class="nav-list">；<div class="card-body">→<section class="card-body">，按内容语义选 - 避免混用：不要写
<section><div><h2>，<h2>应该直接子级于<section>
哪些嵌套会触发浏览器自动修正并放大重排
非法嵌套不报错，但会强制浏览器生成冗余节点、拉长祖先链，让一次局部重排扩散成整棵子树重排。
立即学习“前端免费学习笔记（深入）”；
-
<p><div>hello</div></p>→ 浏览器拆成<p></p><div>hello</div><p></p>，多出两个空<p> -
<ol><p>Item</p></ol>→ 拆成多个孤立<ol>和中间<p>，序号重置、焦点顺序错乱 -
<table>内没用<tbody>包裹<tr>→ 自动补全匿名表格对象，破坏table-layout: fixed的列宽锁定 - 检查方法：在 Console 运行
getComputedStyle(document.querySelector('xxx')).display，若返回block但页面实际有浮动/定位干扰，大概率是嵌套不合法导致样式继承链断裂
模板残留和空注释也在拖慢解析
注释本身不渲染，但浏览器仍需逐字读取、跳过。千行注释 ≈ 多花 3–8ms 解析时间；更麻烦的是模板语法残留（如 {{header}}、{% include %}、@@include），它们虽不报错，却干扰 DOM 构建顺序，尤其在 SSR 场景下容易引发隐性阻塞。
- 所有模板语法标记（包括开始符和结束符）全部删净：
{{/}}、{%/%}、@@include及其配对结束符 - 删掉形如
<!-- ... -->的区块注释——除非你真用构建工具做条件注入，否则纯属噪音 - 整页列表 HTML（比如含 15KB 字符的
<ul>）必须延迟构建，首次只留占位<ul id="list-root"></ul>，用fetch()+insertAdjacentHTML动态插入
真正卡住“百毫秒级延迟”的，往往不是没压缩、没 defer，而是那些被忽略的嵌套 wrapper 和模板残留——它们不报错、不警告，却让浏览器多跑几百毫秒。每次删完，F5 刷新，看 Performance 面板的 Parse HTML 时间是否下降，比任何理论都管用。
