在浏览器渲染页面的过程中，重绘和回流是影响JavaScript渲染性能的两个核心概念，理解它们的触发机制和优化方法，能够有效提升页面的加载速度和交互流畅度。
重绘与回流的基础概念
重绘指的是当元素的外观属性发生变化，但不影响布局时，浏览器重新绘制元素的过程，比如修改元素的背景色、文字颜色等。而回流也叫重排，是指当元素的布局属性发生变化，或者DOM结构发生改变，导致浏览器需要重新计算元素的位置和尺寸，再重新构建渲染树的过程。
回流的代价比重绘高很多，因为回流会触发后续的重绘，甚至可能让整个页面的渲染树重新计算。常见的触发回流的操作包括修改元素的宽高、边距、定位属性，或者操作DOM节点的增删改，还有获取某些会触发浏览器布局计算的属性值。
常见的触发场景
触发重绘的常见操作
- 修改元素的
color、background-color、visibility等外观属性 - 修改
box-shadow、border-radius等不影响布局的样式 - 修改
outline属性
触发回流的常见操作
- 修改元素的
width、height、margin、padding、top、left等布局相关属性 - 添加或者删除DOM节点
- 修改浏览器窗口大小
- 获取
offsetTop、offsetLeft、scrollHeight、clientWidth等会触发布局计算的属性 - 修改元素的
display属性为none或者从none切换为其他值
重绘与回流的优化策略
批量修改DOM和样式
避免频繁单独修改DOM或者样式，尽量将多次修改合并为一次。比如可以先让元素脱离文档流，修改完成后再放回文档流，这样只会触发一次回流。
// 不好的写法：多次触发回流
const element = document.getElementById('test');
element.style.width = '100px';
element.style.height = '100px';
element.style.margin = '10px';
// 优化写法：使用cssText批量修改
const element = document.getElementById('test');
element.style.cssText = 'width:100px;height:100px;margin:10px;';
// 或者使用类名切换，一次性修改多个样式
// 先定义好样式类
// .new-style { width:100px; height:100px; margin:10px; }
const element = document.getElementById('test');
element.classList.add('new-style');
避免频繁读取布局属性
如果需要多次使用offsetTop、clientWidth这类会触发回流的属性，先将其缓存起来，避免重复读取触发多次回流。
// 不好的写法：每次循环都触发回流
const elements = document.querySelectorAll('.item');
for (let i = 0; i < elements.length; i++) {
const top = elements[i].offsetTop; // 触发回流
console.log(top);
}
// 优化写法：缓存属性值
const elements = document.querySelectorAll('.item');
const topValues = [];
for (let i = 0; i < elements.length; i++) {
topValues.push(elements[i].offsetTop); // 只触发一次回流
}
topValues.forEach(top => console.log(top));
使用虚拟DOM减少DOM操作
在现代前端框架中，虚拟DOM可以有效减少直接操作真实DOM的次数。虚拟DOM会先收集所有的修改，然后通过diff算法对比差异，最后批量更新到真实DOM中，从而减少重绘和回流的次数。
优先使用transform和opacity实现动画
transform和opacity属性的修改不会触发回流，只会触发合成层的变化，浏览器会使用GPU加速渲染，性能比重修改布局属性的动画好很多。
/* 不好的动画写法：修改left触发回流 */
.animate-bad {
position: absolute;
left: 0;
transition: left 1s;
}
.animate-bad.move {
left: 100px;
}
/* 优化写法：使用transform不会触发回流 */
.animate-good {
transform: translateX(0);
transition: transform 1s;
}
.animate-good.move {
transform: translateX(100px);
}
避免表格布局
表格布局的回流代价非常高，因为表格中任何一个单元格的尺寸变化，都可能导致整个表格重新计算布局。如果不是必要场景，尽量使用div等块级元素布局。
合理使用will-change属性
如果某个元素会频繁触发重绘或者回流，可以使用will-change属性提前告诉浏览器该元素的变化情况，浏览器会提前做好优化准备，将该元素提升到独立的合成层，减少渲染开销。但要注意不要过度使用，否则会占用过多内存。
/* 提前告知浏览器该元素会频繁修改transform属性 */
.element {
will-change: transform;
}
优化效果验证
可以使用浏览器的Performance面板来录制页面的渲染过程，查看重绘和回流的触发次数和耗时。优化前如果看到大量的回流和重绘事件，按照上述策略调整后，渲染耗时和触发次数都会明显下降，页面的交互响应速度也会有明显提升。
JavaScript重绘回流渲染性能优化策略修改时间：2026-06-25 04:09:22