优化HTML结构比优化JS更能提升DOM性能，因DOM深度过大会显著增加样式计算、选择器匹配和布局回溯开销，压平嵌套、清除冗余wrapper、合并视觉层级可大幅降低JS操作DOM的底层成本。
DOM操作慢，根源往往不在JS写得不好，而在HTML结构本身已经埋下性能隐患——节点嵌套过深、冗余包裹泛滥、语义与布局混用，这些都会让每次querySelector、innerHTML或offsetHeight调用付出远超预期的代价。
为什么改HTML比改JS更能提升DOM性能
浏览器解析HTML生成DOM树的过程是单线程且不可跳过的。一旦DOM深度超过6层，getComputedStyle耗时翻倍，querySelector('.a .b .c .d')匹配失败成本陡增；而JS执行速度比DOM访问快两个数量级以上。优化HTML不是“锦上添花”，是在降低JS每次触达DOM的底层开销。
- DOM深度每+1，样式继承、属性回溯、布局上下文创建就多一层嵌套计算
- 100个同级
<div>的开销，远小于10个嵌套5层的结构 - SSR或框架注入的不可见wrapper（如
<div class="page"><div class="main">）仍参与样式计算，必须清理
识别并清除高频冗余DOM结构
真正拖慢首屏和动画的，不是节点总数，而是无效嵌套。常见模式有：
- 表单控件：
<div><div><div><input></div></div></div>→ 改用<label class="input-group"><input></label> - 卡片组件：
card-wrapper → card-inner → card-body → card-content→ 合并为单层，用padding、gap、伪元素控制视觉层级 - 分隔线：
<div class="divider"></div>或<hr>→ 改用::after或border-bottom - 图标+文字组合：
<div><div><svg></svg></div><div>文本</div></div>→ 改用display: flex+ 内联文本
验证DOM深度是否真的降下来了
别只看源码缩进——要测真实渲染树深度：
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → Elements 面板，右键任意节点 → Show DOM properties，查看
depth值，超过6就要警惕 - Performance 面板录制一次页面加载，重点观察
Layout阶段耗时是否随深度降低明显下降 - 用
document.querySelector('*').length粗略估算节点总数没意义；真正关键的是document.body.children[0].children[0].children[0]这种链式访问是否还存在
压平DOM后，JS操作的收益点在哪
结构变浅，JS的每一次DOM交互都变得更轻量：
-
document.querySelector('.user-card .avatar img')从4层降到2层，匹配速度提升不止一倍 - 批量插入时，
DocumentFragment不再需要模拟深层父链，创建和挂载更快 - 读取
offsetTop或getBoundingClientRect()不再触发强制同步布局（因为父链短，回溯快） - 事件委托监听器绑定在
document.body时，冒泡路径缩短，响应更及时
最常被忽略的一点：即使用了transform或will-change做动画优化，深层DOM仍会拖慢初始渲染和样式计算——结构不干净，任何上层优化都事倍功半。
