什么是重绘（Repainting）？
在浏览器渲染网页的过程中，重绘（Repainting）是指当元素的外观（如颜色、背景、边框等）发生变化， 但不影响其布局时，浏览器重新绘制该元素的过程。
与回流（Reflow / Layout）不同，重绘不会改变元素的位置或尺寸，因此开销通常较小， 但仍应尽量减少以提升页面性能。
哪些操作会触发重绘？
- 修改元素的
color、background-color - 改变
visibility（非display） - 调整
outline、box-shadow等视觉样式 - 使用 CSS 动画改变非几何属性
如何减少不必要的重绘？
以下是一些优化建议：
- 避免频繁修改样式，可合并为一次操作
- 使用
transform和opacity实现动画，它们通常不会触发重绘或回流 - 将频繁变化的元素设置为独立图层（如使用
will-change或transform: translateZ(0)）
// 示例：使用 transform 替代 left/top 动画
.element {
transition: transform 0.3s;
}
.element:hover {
transform: translateX(10px);
}重绘 vs 回流
- 回流（Reflow）：当元素的几何属性（宽高、位置等）改变时，浏览器需重新计算布局，开销较大。
- 重绘（Repainting）：仅外观变化，不涉及布局，开销较小。
- 回流一定会触发重绘，但重绘不一定触发回流。