DOM优化核心是减少回流次数、降低单次开销、避开高成本操作：用documentFragment批量插入、读写分离、优先使用transform/opacity动画、配合requestAnimationFrame聚合更新。
频繁 DOM 操作必然触发重绘和回流，无法“避免”，只能最小化影响。 关键不是不触发，而是减少触发次数、降低单次开销、避开高成本操作。
批量修改 DOM 节点时，用 documentFragment 替代直接插入
每次向真实 DOM 插入一个新节点，浏览器都可能立即计算布局（回流）并重绘。把多个节点先塞进 documentFragment，再一次性挂载，能合并多次回流为一次。
常见错误：循环中反复调用 parent.appendChild(child)，每轮都触发布局计算。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 创建
const frag = document.createDocumentFragment() - 所有新节点先用
frag.appendChild()添加进去 - 循环结束后，只调用一次
parent.appendChild(frag) - 注意：
documentFragment不在真实 DOM 树中，不能用querySelector查找它内部的节点
读写分离：避免在循环中混用 DOM 读取与写入
当 JS 读取某些布局相关属性（如 offsetTop、clientWidth、getComputedStyle()）时，浏览器会强制同步完成之前所有待处理的样式变更，并计算当前布局——这叫“强制同步回流”。如果在循环里边读边写，就会反复触发。
使用场景：动态调整一组元素高度使其一致，或根据某元素尺寸设置另一元素位置。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 先用一次遍历读取所有需要的值（如
el.offsetHeight），存入数组或变量 - 再用另一次遍历统一写入（如
el.style.height = maxHeight + 'px'） - 不要写成
for (...) { h = el.offsetHeight; el.style.height = h + 10 + 'px'; }这种模式
用 transform 和 opacity 做动画，避开 layout 触发
CSS 属性修改是否触发回流，取决于它是否影响几何布局。transform 和 opacity 属于合成属性，浏览器可在独立图层上处理，不触发回流（只可能触发重绘或合成）。
性能影响显著：把 top/left 改成 transform: translateY()，帧率常能从 20fps 提升到 60fps。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 动画优先用
transform（位移、缩放、旋转）和opacity - 确保动画元素提升为合成层：加
will-change: transform或transform: translateZ(0)（后者更兼容） - 避免对
width、height、margin、padding做连续修改来实现动画
用 requestAnimationFrame 批量聚合 DOM 更新
直接在事件回调（如 scroll、resize）里改样式，可能每帧触发多次回流；而 requestAnimationFrame 保证你的更新逻辑在下一帧绘制前执行，且浏览器会自动合并同一帧内的多次 DOM 写入。
容易踩的坑：用 setTimeout 或 debounce 控制频率，不如 requestAnimationFrame 精准，且无法与渲染管线对齐。
实操建议：
立即学习“Java免费学习笔记（深入）”；
- 监听高频事件时，把 DOM 修改逻辑包进
requestAnimationFrame回调 - 用标志位防重复注册：
if (!rafId) rafId = requestAnimationFrame(() => { /* update */ rafId = null; }) - 注意：
requestAnimationFrame不解决单次操作开销大的问题，需配合前面几条一起用
真正难的是权衡——比如为了用 transform 动画而额外加一层 wrapper 元素，可能增加 DOM 复杂度；又比如 documentFragment 在节点数极少时几乎没收益。实际优化前，先用 Chrome DevTools 的 Rendering 面板录一段操作，看看到底哪步在拖慢帧率。
