什么是重绘(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):仅外观变化,不涉及布局,开销较小。
- 回流一定会触发重绘,但重绘不一定触发回流。