核心是减少嵌套层级、用CSS承担视觉结构、清理无意义wrapper；HTML只表达语义，布局修饰交由CSS实现，通过Chrome DevTools查node.depth验证真实深度，≥7需重构。
优化DOM树节点深度，核心是减少嵌套层级、用CSS承担视觉结构、清理无意义wrapper——不是删标签，而是让HTML只表达语义，把布局和修饰交给CSS。
压平常见冗余嵌套结构
很多慢，是因为写了太多“为对齐而生”的div：
- 表单控件：
<div><div><div><input></div></div></div>→ 改用<label class="input-group"><input></label>，靠 padding + flex 控制内边距和对齐 - 卡片组件：多层
card-wrapper → card-inner → card-body → card-content→ 合并为单个<article class="card">，用gap、::before/::after、border实现分隔与装饰 - 图标+文字：
<div><div><svg></svg></div><div>文本</div></div>→ 改用display: inline-flex或display: grid，一行代码搞定对齐 - 分隔线：
<div class="divider"></div>或<hr>→ 改用border-bottom或element::after { content: ""; display: block; height: 1px; background: #eee; }
用CSS替代DOM层级表达视觉关系
DOM 深度 ≠ 视觉层次。视觉上的“内嵌感”“分组感”完全可用 CSS 实现：
- 用
grid-template-areas替代多层容器定位，1 层 DOM 就能实现复杂布局 - 用
flex/gap/place-items控制子元素间距与对齐，不靠 wrapper 塞 margin - 清除浮动不再加
<div class="clearfix"></div>，改用display: flow-root或overflow: hidden - 状态修饰（如禁用、悬停）不用层层包裹，直接加类名：
button--disabled而非<div class="disabled"><button></button></div>
验证是否真降了深度，别只看源码缩进
真实渲染树深度，才是性能关键：
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Elements 面板 → 右键任意节点 → Show DOM properties → 查看
depth值；≥7 就该重构，≥10 已属高危 - Performance 面板录制首屏加载，重点观察 Layout 阶段耗时是否明显下降
- 检查 SSR 或框架注入的不可见 wrapper（如
<div class="page"><div class="main">），它们虽不渲染，但仍参与样式计算，必须一并移除或简化 - 避免“DOM扁平但选择器嵌套深”，比如
.theme .nav .item a即使只有2层DOM，也会触发3层向上回溯——推荐 BEM 类名（nav__item）或提级写法（@at-root .nav__item--hover）
JS操作受益点在哪
DOM变浅后，JS每次触达都更轻量：
-
querySelector('.user-card .avatar img')从4层降到2层，匹配速度提升不止一倍 - 批量插入时，
DocumentFragment创建更快，挂载开销更低 - 读取
offsetTop或getBoundingClientRect()不再频繁触发强制同步布局（父链短，回溯快） - 事件委托绑定在
document.body时，冒泡路径缩短，响应更及时
