重绘和回流是浏览器渲染页面过程中两个核心概念，两者的发生频率直接影响网页的整体性能。理解它们的触发机制，才能针对性地采取优化措施，避免不必要的性能损耗。
重绘和回流的基本概念
什么是回流
回流也叫做重排，指的是当渲染树中元素的布局属性发生变化，比如尺寸、位置、隐藏状态等改变时，浏览器需要重新计算元素的几何信息，然后重新构建渲染树的过程。常见的触发回流的操作包括修改元素的width、height、margin、padding等属性，或者操作DOM元素的增删、改变窗口大小等。
什么是重绘
重绘指的是当元素的外观属性发生变化，但不影响布局时，浏览器只需要重新绘制元素的外观，不需要重新计算布局的过程。比如修改元素的color、background-color、visibility等属性，就会触发重绘。重绘的性能消耗比重流小很多，因为不需要重新计算布局。
两者的性能差异对比
为了更直观地理解两者的性能消耗，我们可以通过下表对比：
| 对比维度 | 回流 | 重绘 |
|---|---|---|
| 触发条件 | 元素布局属性变化 | 元素外观属性变化，不影响布局 |
| 执行步骤 | 重新计算布局、构建渲染树、绘制 | 仅重新绘制外观 |
| 性能消耗 | 高 | 低 |
| 影响范围 | 可能影响后续所有元素布局 | 仅影响当前元素 |
减少重绘和回流的优化措施
批量修改DOM
频繁操作DOM会多次触发回流，我们可以先将元素脱离文档流，修改完成后再放回文档流。比如使用document.createDocumentFragment创建文档碎片，在碎片中完成所有DOM操作后再插入页面：
// 创建文档碎片
const fragment = document.createDocumentFragment();
// 批量创建元素并添加到碎片中
for (let i = 0; i < 10; i++) {
const li = document.createElement('li');
li.textContent = `列表项${i}`;
fragment.appendChild(li);
}
// 一次性插入页面，仅触发一次回流
document.querySelector('ul').appendChild(fragment);
避免频繁读取布局属性
像offsetWidth、offsetHeight、clientTop这类布局属性，读取时会强制浏览器刷新渲染队列，触发回流。如果需要多次使用这些属性，应该先缓存起来：
// 错误写法：每次循环都读取offsetWidth，触发多次回流
const box = document.querySelector('.box');
for (let i = 0; i < 10; i++) {
console.log(box.offsetWidth);
}
// 正确写法：先缓存属性值
const boxWidth = box.offsetWidth;
for (let i = 0; i < 10; i++) {
console.log(boxWidth);
}
使用CSS3硬件加速
对于需要频繁变动的元素，可以使用transform和opacity属性来实现动画效果，这两个属性的变化不会触发回流和重绘，而是直接由合成器线程处理，性能更高：
/* 使用transform实现位移，不会触发回流重绘 */
.animate-box {
transition: transform 0.3s ease;
}
.animate-box:hover {
transform: translateX(20px);
}
减少CSS复杂选择器
过于复杂的CSS选择器会增加浏览器计算样式的时间，间接提升回流重绘的概率。尽量使用简单的类选择器，避免多层嵌套和通配符选择器。
避免频繁修改样式
如果需要修改多个样式属性，不要逐行修改，而是通过修改类名一次性切换样式，减少触发次数：
// 错误写法：多次修改style，触发多次重绘
const el = document.querySelector('.target');
el.style.width = '200px';
el.style.height = '200px';
el.style.backgroundColor = 'red';
// 正确写法：通过类名一次性修改
el.classList.add('new-style');
.new-style {
width: 200px;
height: 200px;
background-color: red;
}
总结
重绘和回流是网页渲染中不可避免的环节，但我们可以通过合理的代码编写和CSS使用，最大程度减少它们的发生频率。核心思路是尽量减少布局属性的修改，批量处理DOM操作，优先使用不会触发回流的属性实现交互效果。做好这些优化，就能有效提升页面的渲染效率，给用户带来更流畅的使用体验。
重绘回流网页性能优化render_treelayout修改时间：2026-06-13 16:27:35