什么是 Repaint？
在浏览器渲染网页的过程中，Repaint（重绘）是指当元素的外观发生变化（如颜色、背景、visibility 等），但不影响其布局时，浏览器重新绘制该元素的过程。
与之相关的另一个概念是 Reflow（回流/重排），它发生在元素的几何尺寸或位置发生变化，导致整个布局需要重新计算。
什么会触发 Repaint？
以下操作通常会触发重绘：
- 修改元素的颜色（
color、background-color） - 改变透明度（
opacity） - 切换可见性（
visibility） - 修改轮廓（
outline） - 调整 box-shadow 等不影响布局的样式
注意：即使只触发 repaint，也可能隐式引发 reflow，具体取决于浏览器实现。
如何减少 Repaint？
为了提升页面性能，应尽量减少不必要的重绘：
- 使用 CSS
transform和opacity实现动画，它们可由合成器线程处理，避免主渲染线程负担。 - 批量修改样式，避免逐条设置导致多次重绘。
- 使用
will-change提示浏览器提前优化。 - 避免频繁读取会导致强制同步布局的属性（如
offsetWidth）。
简单示例
下面是一个通过 JavaScript 触发 repaint 的例子：
const box = document.getElementById('myBox');
box.style.backgroundColor = 'lightblue'; // 触发 repaint