重绘和回流是浏览器渲染页面过程中两个重要的性能相关概念，理解二者的触发逻辑和关联关系，对优化前端页面性能有直接的帮助。重绘指的是当元素的外观样式发生变化，但不影响其几何布局属性时，浏览器重新绘制该元素的过程。回流则指的是当元素的布局属性发生变化，或者页面布局整体需要重新计算时，浏览器重新计算元素几何位置的过程。
重绘与回流的核心区别
要搞清楚重绘是否会引发回流，首先需要明确二者的核心差异，具体可以从触发条件、影响范围、性能消耗三个维度对比：
| 对比维度 | 重绘 | 回流 |
|---|---|---|
| 触发条件 | 元素样式改变，不影响布局，比如颜色、背景图、visibility变化 | 元素布局属性改变，比如宽高、位置、display属性变化，或者页面初始化、窗口 resize |
| 影响范围 | 仅影响当前元素自身的绘制 | 会影响当前元素及所有后续兄弟元素、父元素，甚至整个页面的布局 |
| 性能消耗 | 消耗较低，仅重新执行paint阶段 | 消耗较高，需要重新执行layout阶段，后续往往还会触发重绘 |
大部分重绘不会引发回流
从浏览器的渲染流水线来看，渲染流程大致分为解析HTML生成DOM树、解析CSS生成CSSOM树、合并生成渲染树、布局计算（layout/回流）、绘制（paint/重绘）、合成显示几个阶段。重绘对应的是paint阶段，而回流对应的是layout阶段，正常情况下paint阶段在layout阶段之后执行，因此单纯的重绘操作不会反向触发前面的layout阶段。
比如以下代码修改元素的文字颜色，只会触发重绘，不会引发回流：
// 修改元素颜色，仅触发重绘
const box = document.getElementById('box');
box.style.color = '#ff0000';
再比如修改元素的visibility属性，元素仍然占据布局空间，布局没有变化，也只会触发重绘：
// 修改visibility，仅触发重绘
const box = document.getElementById('box');
box.style.visibility = 'hidden';
重绘引发回流的特殊场景
虽然大部分重绘不会触发回流，但存在部分特殊场景，重绘操作会间接触发回流，主要有以下几类情况：
1. 重绘操作导致布局属性被动变化
有些样式属性的修改看似只影响外观，但实际上会改变元素的布局属性，此时重绘和回流会同时触发，看起来像是重绘引发了回流。比如修改元素的border-width属性，边框宽度变化会改变元素的整体宽高，从而触发回流，同时边框样式变化也会触发重绘。
// 修改边框宽度，边框宽度变化会改变元素宽高，触发回流同时触发重绘
const box = document.getElementById('box');
box.style.borderWidth = '10px';
2. 重绘后强制读取布局属性
浏览器为了优化性能，会把多次DOM样式修改的回流操作合并执行，也就是异步回流。但如果在修改样式触发重绘之后，立即读取需要布局计算才能得到的属性，比如offsetWidth、offsetHeight、clientWidth、getComputedStyle等，浏览器会强制刷新队列，先执行回流计算，再返回属性值，此时就会出现重绘之后触发回流的情况。
const box = document.getElementById('box');
// 修改颜色触发重绘
box.style.color = '#ff0000';
// 立即读取offsetWidth，强制触发回流
const width = box.offsetWidth;
console.log(width);
3. 重绘导致页面可视区域变化触发整体回流
如果重绘操作导致页面的可视区域发生变化，比如修改body的背景色时，浏览器需要重新计算整个页面的绘制范围，部分浏览器会触发整体的布局重新计算，进而引发回流。不过这种情况不同浏览器的实现有差异，不是所有浏览器都会出现。
避免不必要回流的优化建议
既然回流的性能消耗远高于重绘，开发中可以通过以下方式减少不必要的回流：
- 尽量使用
transform、opacity等属性实现动画，这两个属性的变化不会触发回流和重绘，只会触发合成阶段，性能最优 - 批量修改样式时，使用
class切换而不是逐行修改style属性，减少回流触发次数 - 避免频繁读取
offsetWidth、getComputedStyle等布局属性，如需多次读取可以先缓存结果 - 对频繁变化的元素使用
position: absolute或position: fixed脱离文档流，减少回流的影响范围
需要注意的是，现代浏览器的渲染优化机制已经比较成熟，少量的重绘和回流不会对页面性能造成明显影响，只有在高频操作或者复杂页面中才需要重点优化。
重绘回流render_treelayoutpaint修改时间：2026-07-19 20:24:26