DOM深度超4层会显著拖慢首屏渲染，应通过DevTools查看node.depth确认并压平结构，用语义化标签、Grid/Flex替代冗余嵌套，清理空节点，并验证JS查询逻辑。
DOM 深度超过 4 层（从 <body> 算起）时，浏览器解析、样式继承和重排开销会非线性上升——这不是“写法不够优雅”，而是真实拖慢首屏的硬伤。
怎么快速确认当前 DOM 深度超标
别靠肉眼数嵌套。打开 Chrome DevTools → Elements 面板，右键任意节点 → “Show DOM properties”，看 node.depth 值：
- ≤4：安全
- 5–6：需关注，尤其在低端 Android WebView 中已可见延迟
- ≥7：大概率存在冗余包裹，应立即清理
特别注意 CMS 或低代码平台导出的结构，比如 <div data-v-123><div class="wrapper"><div class="content">…</div></div></div>，这种三层 wrapper 几乎不参与渲染逻辑，纯属解析噪音。
用语义化标签直接压平结构
浏览器对 <header>、<nav>、<main>、<section> 有原生解析优化：不走 class 匹配、不触发伪类回溯、继承链更短。替换不是为了 SEO，是为砍掉计算路径：
立即学习“前端免费学习笔记（深入）”；
-
<div class="header">…</div>→ 改成<header class="header">…</header> -
<div class="main"><div class="content">…</div></div>→ 直接用<main>…</main>，类名可保留 - 避免
<section><div><h2>这种写法：<h2>应为<section>的直接子元素，否则语义断裂，解析器要兜一圈校验
Flex/Grid 替代嵌套容器时的关键陷阱
用 CSS 布局能力替代 HTML 嵌套，效果立竿见影，但错用反而放大开销：
- 三列布局别再写
<div class="row"><div class="col">A</div><div class="col">B</div></div>，改用<main style="display: grid; grid-template-columns: 1fr 1fr 1fr;"> - Grid 容器里不要再套一层 Flex 微调——这通常说明模块职责没切分清，该拆组件而不是加嵌套
- 未定义
grid-template-rows时，每行高度为auto，内容变化易触发多次重排；关键区域建议显式写死，如grid-template-rows: 80px auto 60px -
display: contents能让父容器“消失”在渲染树中，但 IE 全系不支持，且会剥离可访问性节点，屏幕阅读器无法读取，慎用于核心导航或表单容器
删空节点比压缩空格更有效
一个空 <div></div> 或仅含空白字符的节点，仍参与 layout 计算；千行注释虽不渲染，但浏览器仍逐字读取跳过。实测：DOM 节点每增 100 个，平均拖慢解析 20–40ms。
上线前可用这段脚本快速估算冗余节点：
document.querySelectorAll('comment, script:not([src]), style:not([media])').length
DevTools Elements 面板 Ctrl+F 搜索 <!-- 或 <div></div>，批量清理开发期残留。模板引擎中避免 <div>{{ item.title || '' }}</div>，改用条件判断或 display: none 控制显隐。
最常被忽略的一点：深度控制不是“删完就完”，而是要配合 JS 行为检查——比如某个 querySelector('.card-body') 依赖了已被删掉的中间层，运行时会静默失败。改结构后务必验证所有 DOM 查询逻辑是否依然成立。
