DOM节点数过多直接拖慢解析，每多100个节点平均多耗20–40ms；嵌套超6层或单父超50子节点会导致滚动与重排卡顿；应精简结构、用语义化标签、Flex/Grid降级嵌套，并验证JS选择器有效性。
DOM节点数直接拖慢解析，不是玄学是实测数据
每多100个DOM节点，浏览器平均多花20–40ms解析；嵌套超6层、单个父元素子节点超50个，滚动和重排就明显卡顿。这不是“看着乱”，而是V8和Blink在真实地多跑循环、多建对象、多回溯关系。
-
nodeDepth超过6的<div>，大概率该砍 <li>用 <code>document.querySelectorAll('div:not([class]):not([id]):not([data-*])').length查纯空壳<div>，结果大于0就得动手 <li>CMS或低代码导出的 <code><div data-id="xxx">，只要没被 <code>addEventListener或querySelector显式调用，就是噪音语义化标签不是为了好看，是让解析器少猜几轮
浏览器对
<header></header>、<nav></nav>、<main></main>有预判优化：它们天然单层、语义唯一、父子关系明确。一堆同级<div class="xxx"> 则强制解析器逐层试探、验证、回溯。 <ul><li><code><div class="header"> → 改成 <code><header class="header"></header>，类名不动，只换标签 <div class="main-content"> → 改成 <code><main></main>，注意它不能嵌套在<section></section>内- 别写
<section><div><h2></h2></div></section>：语义断裂，<h2></h2>必须是<section></section>的直接子级 - 三栏布局：
<div class="row"> <div class="col"></div> <div class="col"></div> </div>→ 改用display: grid，删掉.row和两个.col容器 - 按钮居中：
<div class="flex-container"><div class="flex-item"></div></div>→ 直接给父容器加display: flex，删中间层 - 警惕“伪扁平”：grid 容器里再套三层
<div> 实现内部布局，DOM 层级根本没减，只是把嵌套从 HTML 搬到了 CSS 视觉逻辑里 <h3>删之前必须验证 JS 选择器是否还有效</h3> <p>改结构最常踩的坑不是样式错位，而是 JS 找不到元素了。尤其当脚本依赖 <code>document.querySelector('.wrapper .content')这类深度选择器时，删掉一层就全挂。立即学习“前端免费学习笔记（深入）”；
- 全局搜索项目里所有
querySelector、getElementById、getElementsByClassName，检查目标是否还在新结构里 - 用 DevTools Console 运行
document.querySelector('.old-class-name')，返回null就得同步改 JS 或保留对应 class - 避免用
parentElement.children[2]这类索引定位，结构一动就失效；优先用语义 class 或 data 属性锚定
<div>。它们不渲染、不交互、不参与样式，却强迫浏览器为每个都分配内存、建立父子链、参与 CSS 匹配——删掉它们，比调任何配置都快。</div> - 全局搜索项目里所有
Flex/Grid 不是“更酷的写法”，是 DOM 层级的物理削减
用 display: grid 或 display: flex 替代包裹容器，不是 CSS 技巧，是把 3–4 层 HTML 嵌套压成 1 层——DOM 节点数直接减，CSS 选择器匹配路径也变短。
