减少重绘的关键是批量处理DOM变更、用class切换替代内联样式、优先使用transform/opacity动画、集中读取布局信息。
避免节点操作触发过多重绘，关键在于减少不必要的视觉更新，并让浏览器有机会批量处理变更。重绘虽比重流轻量，但高频发生仍会拖慢渲染帧率，尤其在动画或滚动场景中明显。
优先用离线操作代替实时 DOM 更新
每次向真实 DOM 插入、删除或移动节点，都可能触发重绘（尤其是可见元素）。把操作移到内存中完成，再一次性挂载：
- 用 document.createDocumentFragment() 缓存多个新节点，最后
appendChild(fragment)—— 只触发一次重绘 - 对已有容器，可先设 element.style.display = 'none'，操作完再恢复显示；隐藏期间不参与渲染，自然跳过重绘
- 避免在循环里反复调用
innerHTML +=或appendChild()，这会逐次触发样式计算和绘制
用 class 切换替代内联样式修改
直接改 element.style.color 或 style.backgroundColor 属于内联样式变更，即使只改外观，也可能打断浏览器的绘制优化节奏。更稳妥的方式是：
- 预定义 CSS 类（如
.highlight、.disabled），通过element.classList.add()切换 - 类中集中声明多个视觉属性（color、background、border、opacity 等），由 CSS 引擎统一调度，利于合并绘制批次
- 避免在 JS 中拼接 style 字符串，除非明确需要动态值且仅执行一次
动画场景下绕开重绘路径
某些视觉变化天生更“便宜”。如果目标是动效，优先选不走主渲染管线的属性：
立即学习“Java免费学习笔记（深入）”；
-
transform（如
translateX、scale）和 opacity 修改由合成器（compositor）处理，通常只触发 GPU 层合成，不进入重绘流程 - 配合
will-change: transform可提前提示浏览器提升图层，但仅对持续动画的元素设置，避免内存浪费 - 避免用
top/left/margin驱动位移，它们会触发回流，连带引发重绘
读取布局信息时注意时机
看似只读的操作，比如 getBoundingClientRect() 或 offsetHeight，若出现在样式修改之后，会强制浏览器同步计算并重绘——这就是“布局抖动”的根源：
- 把所有读取操作集中放在最前面，例如先缓存
rect = el.getBoundingClientRect()，再批量写样式 - 在
requestAnimationFrame回调中读取位置/尺寸，能对齐渲染帧，减少意外重绘 - 高频事件（如
scroll、mousemove）中，不要每帧都读取布局信息，应节流 + 缓存结果
