在浏览器渲染流程中，Repaint（重绘）和Reflow（回流）是两个紧密相关的渲染行为，理解两者的触发逻辑和关联关系，是优化页面性能的基础。Repaint指的是当元素的外观属性发生变化，但不影响布局时，浏览器重新绘制元素的过程。Reflow则是当元素的布局属性发生变化，导致页面布局需要重新计算时触发的流程，Reflow发生之后必然会触发Repaint。
Repaint和Reflow的基础定义
要搞清楚Repaint何时会触发Reflow，首先需要明确两个概念的核心区别：
- Repaint（重绘）：元素的外观发生改变，但不影响文档流中元素的位置和尺寸，浏览器只需要重新绘制该元素的外观即可，不需要重新计算布局。
- Reflow（回流/重排）：元素的布局属性发生改变，会影响其他元素的位置或尺寸，浏览器需要重新计算整个文档或部分文档的布局，之后必然会触发Repaint。
Repaint的常见触发场景
以下操作只会触发Repaint，不会直接触发Reflow：
- 修改元素的颜色相关属性，比如
color、background-color、border-color等。 - 修改元素的可见性，比如设置
visibility: hidden，注意这和display: none不同，后者会触发Reflow。 - 修改元素的阴影属性，比如
box-shadow、text-shadow。 - 修改元素的轮廓属性，比如
outline。
下面是一段触发Repaint的示例代码：
/* 以下样式修改只会触发Repaint */
.element {
color: #ff0000; /* 修改文字颜色，触发Repaint */
background-color: #f0f0f0; /* 修改背景色，触发Repaint */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 修改阴影，触发Repaint */
visibility: hidden; /* 隐藏元素但不脱离文档流，触发Repaint */
}
Repaint触发Reflow的特殊场景
通常情况下，Repaint本身不会触发Reflow，但存在以下几种特殊情况，Repaint的发生会连带触发Reflow：
1. 强制同步布局导致的连带触发
当我们在修改元素外观属性（触发Repaint）之后，立刻读取需要布局计算才能得到的属性时，浏览器为了保证返回值的准确性，会先执行一次Reflow，再返回属性值。这种场景下，Repaint的后续操作间接触发了Reflow。
常见的需要布局计算的属性包括offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、getComputedStyle等。
示例代码如下：
// 先修改背景色，触发Repaint
const box = document.querySelector('.box');
box.style.backgroundColor = 'red';
// 立刻读取offsetWidth，浏览器会先执行Reflow再返回值
console.log(box.offsetWidth); // 这里会触发Reflow
2. Repaint属性修改间接影响布局
部分看似属于外观的属性，实际上修改后会影响元素的布局，此时修改该属性会先触发Reflow，再触发Repaint。比如修改border属性，如果元素的盒模型是content-box，增加border宽度会增加元素的总宽度，从而触发Reflow。
示例代码如下：
.element {
box-sizing: content-box; /* 默认盒模型 */
width: 100px;
height: 100px;
border: 1px solid #000; /* 初始border */
}
.element.active {
border: 10px solid #000; /* 修改border宽度，元素总宽度变为120px，触发Reflow，之后触发Repaint */
}
3. 批量Repaint操作触发布局阈值
当短时间内连续触发大量Repaint操作，且这些操作累积起来影响了页面的布局计算时，浏览器可能会合并这些操作并触发一次Reflow。比如连续修改多个元素的background-color，如果这些元素的尺寸变化累积超过了浏览器的布局阈值，就会触发Reflow。
如何避免Repaint连带触发Reflow
为了减少不必要的性能开销，我们可以采取以下措施：
- 避免修改外观属性后立即读取布局相关属性，尽量将读取操作放在修改操作之前，或者批量修改完成后再读取。
- 对于需要频繁修改样式的元素，可以使用
transform和opacity属性，这两个属性的修改只会触发合成层操作，不会触发Repaint和Reflow。 - 批量修改样式时，使用
class切换代替逐个修改样式属性，减少渲染次数。 - 对于复杂的动画，使用
requestAnimationFrame来调度，让浏览器在合适的时机统一执行渲染操作。
以下是使用requestAnimationFrame优化渲染的示例：
function updateStyles() {
const box = document.querySelector('.box');
// 批量修改样式
box.style.backgroundColor = 'red';
box.style.color = 'white';
// 所有修改完成后再读取布局属性
const width = box.offsetWidth;
console.log(width);
}
// 使用requestAnimationFrame调度，避免多次触发渲染
requestAnimationFrame(updateStyles);
总结
Repaint本身不会直接触发Reflow，只有在强制同步布局、修改的属性间接影响布局、批量操作超过布局阈值等特殊场景下，才会出现Repaint连带触发Reflow的情况。开发者在日常开发中需要明确两类操作的边界，合理规避不必要的Reflow，从而提升页面的渲染性能。