在网页性能优化过程中，浏览器的渲染机制是绕不开的核心知识点，其中回流和重绘是影响页面渲染效率的两个关键概念。理解两者的差异并掌握对应的优化方法，能够有效减少浏览器的渲染开销，提升网页加载速度和交互流畅度。
什么是重绘
重绘指的是当元素的外观属性发生变化，但不影响其在文档流中的位置和布局时，浏览器重新绘制该元素的过程。比如修改元素的color、background-color、visibility等样式属性，就会触发重绘。
重绘的代价相对较小，因为浏览器只需要重新绘制受影响的元素，不需要重新计算布局。但频繁的重绘依然会消耗性能，尤其是在动画场景中，如果每一帧都触发重绘，很容易导致页面卡顿。
什么是回流
回流也叫重排，指的是当元素的布局属性发生变化，导致浏览器需要重新计算元素的位置、大小等几何信息，然后重新构建渲染树的过程。触发回流的场景比触发重绘的场景更多，常见的包括：
- 修改元素的
width、height、margin、padding等几何属性 - 添加或删除DOM节点
- 改变窗口大小
- 读取
offsetWidth、offsetHeight、clientWidth等布局相关的属性 - 修改页面默认字体
回流的代价比重绘高很多，因为回流会触发后续的重绘，而且可能影响整个文档或部分文档的布局，浏览器需要重新计算所有受影响元素的位置和大小，性能消耗非常明显。
回流和重绘的核心差异
| 对比维度 | 重绘 | 回流 |
|---|---|---|
| 触发条件 | 元素外观属性变化，不影响布局 | 元素布局属性变化，影响几何信息 |
| 性能消耗 | 较低，仅重新绘制元素 | 较高，需要重新计算布局并触发重绘 |
| 影响范围 | 仅影响当前元素的外观 | 可能影响当前元素及周围元素的布局 |
| 触发顺序 | 不会触发回流 | 一定会触发重绘 |
减少回流和重绘的优化方法
1. 批量修改DOM和样式
避免频繁操作DOM和修改样式，尽量将多次操作合并为一次。比如需要修改多个样式时，可以先修改元素的className，而不是直接修改多个style属性。
如果必须修改多个样式属性，可以先让元素脱离文档流，修改完成后再放回文档流，这样只会触发一次回流。示例代码如下：
// 不推荐的写法：多次修改样式触发多次回流
const element = document.getElementById('test');
element.style.width = '200px';
element.style.height = '200px';
element.style.backgroundColor = 'red';
// 推荐的写法：使用className批量修改样式
const style = document.createElement('style');
style.innerHTML = `
.new-style {
width: 200px;
height: 200px;
background-color: red;
}
`;
document.head.appendChild(style);
element.className = 'new-style';
// 或者先脱离文档流再修改
element.style.position = 'absolute';
element.style.width = '200px';
element.style.height = '200px';
element.style.backgroundColor = 'red';
element.style.position = 'static';
2. 避免频繁读取布局属性
读取offsetWidth、offsetHeight、clientWidth等布局属性时，浏览器会强制刷新渲染队列，触发回流。如果需要多次使用这些属性，可以先将其缓存起来，避免重复读取。
// 不推荐的写法：多次读取布局属性触发多次回流
const element = document.getElementById('test');
for (let i = 0; i < 10; i++) {
console.log(element.offsetWidth);
element.style.width = element.offsetWidth + 10 + 'px';
}
// 推荐的写法：缓存布局属性
const element = document.getElementById('test');
const width = element.offsetWidth;
for (let i = 0; i < 10; i++) {
console.log(width);
element.style.width = width + 10 + 'px';
}
3. 使用CSS3硬件加速
对于动画场景，尽量使用transform和opacity属性来实现，这两个属性的变化不会触发回流和重绘，而是会触发浏览器的硬件加速，由GPU来处理渲染，性能更好。
/* 不推荐的动画写法：修改left和top触发回流 */
.animate-box {
position: absolute;
left: 0;
top: 0;
transition: left 1s, top 1s;
}
.animate-box.move {
left: 100px;
top: 100px;
}
/* 推荐的动画写法：使用transform触发硬件加速 */
.animate-box {
transform: translate(0, 0);
transition: transform 1s;
}
.animate-box.move {
transform: translate(100px, 100px);
}
4. 减少DOM深度和复杂度
DOM结构越复杂，回流和重绘的计算成本就越高。尽量保持DOM结构扁平化，避免嵌套过深的标签。同时减少不必要的DOM节点，删除页面中无用的元素和样式。
5. 使用文档碎片批量插入DOM
如果需要插入多个DOM节点，先将其放入文档碎片DocumentFragment中，再一次性插入到文档中，只会触发一次回流。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = '列表项' + i;
fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);
总结
回流和重绘是浏览器渲染过程中不可避免的环节，但通过合理的优化方法，可以大幅减少它们的触发次数和性能消耗。在实际开发中，要养成避免频繁操作DOM、批量修改样式、优先使用硬件加速属性的习惯，从渲染层面提升网页的整体性能，给用户带来更流畅的体验。