DOM树本身不可优化，可优化的是操作方式和渲染行为；应减少重排重绘、缓存查询结果、合并样式修改、使用DocumentFragment、避免强制同步布局，并优先采用transform/opacity等硬件加速属性。
DOM树本身不能被“优化”成更小或更快的结构，它是由HTML解析天然生成的；真正可优化的是对DOM树的操作方式和触发的渲染行为。核心目标是减少重排（reflow）与重绘（repaint）次数，避免强制同步布局，让浏览器渲染更高效。
缓存DOM查询结果，避免重复访问
每次调用 document.getElementById、querySelector 等方法，浏览器都要遍历DOM树。高频重复查询会显著拖慢脚本执行。
- 把常用节点赋值给变量，后续操作直接复用
- 不要在循环里反复写
document.querySelector('.item')，应提前查一次再遍历子节点 - 对动态生成的内容，优先用事件委托代替为每个元素单独绑定事件
批量修改，减少重排重绘频次
连续修改样式或结构（比如改10次 element.style.width），浏览器可能逐次触发重排；而合并为一次性操作，只引发一次更新。
- 用 CSS 类名控制样式变化，而非直接操作
style属性 - 需要插入多个节点时，先创建
DocumentFragment，把所有新节点 append 进去，最后再整体插入 DOM - 临时隐藏元素（
display: none）再做批量修改，完成后恢复显示，可避免中间状态触发多次重排
避免强制同步布局（Forced Synchronous Layout）
读取某些布局相关属性（如 offsetHeight、getComputedStyle()）会迫使浏览器立刻完成待处理的DOM变更并计算当前布局，打断渲染流水线。
- 不要在修改样式后立即读取
clientWidth，除非真需要该值 - 若必须读取，把所有读取操作集中在一起，所有写入操作放在前面或后面，避免“读-写-读-写”交错
- 用
requestAnimationFrame延迟到下一帧再读取，让浏览器有机会先完成布局
合理使用硬件加速与图层策略
不是所有样式变更都触发重排。用不触发几何计算的属性做动画或切换，能跳过布局阶段，只走绘制或合成。
- 优先用
transform和opacity实现位移、缩放、淡入淡出 - 对频繁动画元素添加
will-change: transform（谨慎使用，仅限必要时） - 用
contain: layout paint限制重排影响范围，防止父容器因子元素变化而整体重算
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
