重绘与回流是JavaScript影响页面渲染性能的关键机制，回流因布局变化需重新计算几何属性，开销大且必引发重绘。频繁操作如修改尺寸、读取offset等会触发回流，优化策略包括：批量修改DOM、用CSS类替代内联样式、缓存布局信息、使用transform实现动画、合理启用硬件加速，并通过读写分离和requestAnimationFrame减少布局抖动，从而提升渲染效率。
页面性能优化中，JavaScript对渲染的影响主要体现在重绘（Repaint）和回流（Reflow）上。理解这两者的触发机制并采取相应策略，能显著提升页面响应速度与用户体验。
什么是重绘与回植？
回流：当页面布局发生改变时，浏览器需要重新计算元素的几何属性（如位置、大小），这个过程叫回流。回流会触发整个或部分渲染树的重建，开销较大。
重绘：在不改变布局的前提下，仅样式发生变化（如颜色、背景），浏览器只需重新绘制外观，不涉及几何计算，开销小于回流。
注意：回流必定引发重绘，但重绘不一定触发回流。
立即学习“Java免费学习笔记（深入）”；
常见触发回流的操作
以下 JavaScript 操作会直接导致回流：
- 添加或删除可见 DOM 元素
- 修改元素尺寸、位置、边距等几何属性
- 读取某些布局信息（如 offsetTop、offsetWidth、clientHeight 等）
- 调整窗口大小或滚动页面
- 设置字体大小或内容变化影响布局
减少回流与重绘的核心策略
通过合理编码方式，将潜在的频繁回流合并或延迟执行。
1. 批量修改 DOM
避免逐个修改多个属性。使用文档片段（DocumentFragment）或先隐藏元素，修改完成后再插入或显示。
const fragment = document.createDocumentFragment();
for (let i = 0; i < items.length; i++) {
const el = document.createElement('div');
el.textContent = items[i];
fragment.appendChild(el);
}
container.appendChild(fragment); // 只触发一次回流
2. 使用 CSS 类替代频繁样式操作
将样式变更集中到 class 中，通过切换 class 来控制视觉效果，减少 JS 直接操作 style 的次数。
// 推荐
element.classList.add('active');
<p>// 避免
element.style.color = 'red';
element.style.fontSize = '16px';
3. 避免在循环中读取布局信息
若需获取元素尺寸，应先缓存值，避免反复访问触发回流。
const width = element.offsetWidth; // 读一次
for (let i = 0; i < 100; i++) {
// 使用缓存的 width，而非重复读取
}
4. 利用 transform 和 opacity 实现动画
CSS 的 transform 和 opacity 属性由合成层（Composite Layer）处理，不会触发回流或重绘，性能最优。
.animated {
transition: transform 0.3s;
}
.animated:hover {
transform: translateX(10px);
}
相比直接修改 left 或 top，transform 更高效。
5. 启用硬件加速（适度使用）
通过创建独立图层，让 GPU 分担渲染工作。
.accelerate {
transform: translateZ(0);
/* or */
will-change: transform;
}
注意：过度使用 will-change 可能增加内存消耗，仅用于明确频繁变化的元素。
利用浏览器的异步渲染机制
浏览器会将多个 DOM 修改合并为一次回流。我们可以主动利用这一点：
- 将读写分离：所有写操作集中处理，读操作放在最后
- 使用 requestAnimationFrame 控制更新时机，在下一帧前批量提交变化
// 正确顺序：写 → 写 → 读 div.style.left = '10px'; div.style.top = '20px'; console.log(div.offsetLeft); // 触发回流，但只一次 <p>// 错误顺序：写 → 读 → 写 → 读（两次回流）
基本上就这些。掌握回流与重绘的原理，结合实际场景选择合适的优化手段，能让 JavaScript 更“轻”地参与页面渲染。关键在于减少布局抖动，把代价高的操作降到最低。
