回流（Reflow） 和 重绘（Repaint） 是浏览器渲染页面时的两个关键过程，它们对页面性能有重要影响。理解它们的机制以及如何优化，可以帮助我们编写更高效的代码。下面我们将结合代码深度分析回流和重绘。
1. 回流和重绘的基本概念
1.1 回流（Reflow）
回流是指浏览器计算页面布局的过程。当页面中的元素发生几何属性（如宽度、高度、位置等）变化时，浏览器需要重新计算元素的几何信息，并重新构建渲染树（Render Tree）。这个过程称为回流。
触发回流的常见操作：
修改元素的几何属性（如 width、height、padding、margin 等）。添加或删除 DOM 元素。改变窗口大小或字体大小。获取某些布局信息（如 offsetWidth、offsetHeight 等）。
1.2 重绘（Repaint）
重绘是指浏览器根据新的样式信息重新绘制元素的外观（如颜色、背景等），但不涉及布局的变化。重绘的开销通常比回流小。
触发重绘的常见操作：
修改元素的非几何样式（如 color、background-color、visibility 等）。
2. 回流和重绘的性能影响
回流比重绘更消耗性能：因为回流需要重新计算布局，可能会影响整个渲染树。回流会触发重绘：当回流发生时，浏览器通常会触发重绘以更新页面外观。
3. 代码示例与分析
示例 1：频繁修改样式导致多次回流
const box = document.getElementById('box');
// 频繁修改样式
for (let i = 0; i < 100; i++) {
box.style.width = `${i}px`;
box.style.height = `${i}px`;
}
问题分析
每次修改 width 和 height 都会触发回流和重绘。总共触发了 100 次回流和重绘，性能开销巨大。
优化方法
使用 requestAnimationFrame 或一次性修改样式。
const box = document.getElementById('box');
// 使用 requestAnimationFrame 优化
function updateBoxSize() {
for (let i = 0; i < 100; i++) {
requestAnimationFrame(() => {
box.style.width = `${i}px`;
box.style.height = `${i}px`;
});
}
}
updateBoxSize();
示例 2：批量修改 DOM 减少回流
const container = document.getElementById('container');
// 每次添加一个元素，触发多次回流
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
container.appendChild(div);
}
问题分析
每次 appendChild 都会触发一次回流。总共触发了 100 次回流。
优化方法
使用文档片段（DocumentFragment）批量添加元素。
const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
// 使用文档片段批量添加
for (let i = 0; i < 100; i++) {
const div = document.createElement('div');
div.textContent = `Item ${i}`;
fragment.appendChild(div);
}
container.appendChild(fragment); // 只触发一次回流
示例 3：避免强制同步布局（Forced Synchronous Layout）
const box = document.getElementById('box');
// 强制同步布局
for (let i = 0; i < 100; i++) {
console.log(box.offsetWidth); // 触发回流
box.style.width = `${i}px`;
}
问题分析
offsetWidth 是一个需要布局信息的属性，每次访问都会强制浏览器执行回流。在循环中频繁访问布局信息会导致性能问题。
优化方法
将布局信息的读取和样式的修改分开。
const box = document.getElementById('box');
// 先读取布局信息
const width = box.offsetWidth;
// 再修改样式
for (let i = 0; i < 100; i++) {
box.style.width = `${i}px`;
}
示例 4：使用 CSS 动画代替 JavaScript 动画
const box = document.getElementById('box');
// 使用 JavaScript 实现动画
function animate() {
let pos = 0;
const interval = setInterval(() => {
if (pos >= 100) clearInterval(interval);
box.style.left = `${pos}px`;
pos++;
}, 10);
}
animate();
问题分析
每次修改 left 都会触发回流和重绘。setInterval 的执行频率不可控，可能导致性能问题。
优化方法
使用 CSS 动画代替 JavaScript 动画。
4. 如何减少回流和重绘
避免频繁修改样式：
使用 class 一次性修改多个样式。使用 requestAnimationFrame 优化动画。
批量修改 DOM：
使用 DocumentFragment 或 cloneNode 批量操作 DOM。
避免强制同步布局：
将布局信息的读取和样式的修改分开。
使用 CSS 动画：
CSS 动画由浏览器优化，性能更好。
使用 transform 和 opacity：
transform 和 opacity 不会触发回流，适合用于动画。
使用 will-change：
提前告诉浏览器哪些属性会变化，以便浏览器优化。
.box {
will-change: transform, opacity;
}
5. 总结
回流：涉及布局变化，性能开销大。重绘：涉及外观变化，性能开销较小。优化策略：
批量操作 DOM。避免强制同步布局。使用 CSS 动画和 transform、opacity。使用 will-change 提示浏览器优化。
通过理解回流和重绘的机制，并采用合理的优化策略，可以显著提升页面性能，提供更流畅的用户体验。