什么是 Repaint（重绘）？

What is Repaint?

Repaint, also known as a redraw, occurs when changes are made to an element’s appearance that do not affect its layout. These changes can include modifications to an element’s color, background, visibility, or other visual properties. Unlike reflow, repaint does not involve recalculating the layout of the page, which makes it less costly in terms of performance.

Repaint（也称为重绘）是指当元素的外观发生变化但不影响其布局时所发生的过程。这些变化可以包括对元素颜色、背景、可见性或其他视觉属性的修改。与 Reflow 不同，Repaint 不涉及重新计算页面的布局，因此在性能开销方面相对较小。

1. When Does Repaint Occur?

Repaint 何时发生？

Repaint occurs whenever an element’s visual appearance is modified in a way that does not affect its geometry or positioning within the document. This includes actions such as:

• Changing the color or background of an element
• Adjusting the visibility of an element (e.g., setting visibility: hidden or opacity)
• Modifying borders, shadows, or other non-layout properties
• Updating text color or applying text decorations (like underline or strike-through)

Repaint 会在元素的视觉外观发生变化但不影响其几何形状或在文档中的定位时发生。这包括以下操作：

• 更改元素的颜色或背景
• 调整元素的可见性（例如，设置 visibility: hidden 或 opacity）
• 修改边框、阴影或其他非布局属性
• 更新文本颜色或应用文本装饰（如 underline 或 strike-through）

Examples of Actions Causing Repaint

导致 Repaint 的操作示例

// Example 1: Changing the background color of an element
document.querySelector('div').style.backgroundColor = 'blue';

// Example 2: Modifying the opacity of an element
document.querySelector('div').style.opacity = '0.5';

// Example 3: Updating the border color of an element
document.querySelector('div').style.borderColor = 'red';

Explanation:

• In Example 1, changing the background color of a <div> causes a repaint because the element’s appearance is altered, but its size and position remain the same.
• In Example 2, modifying the opacity of an element triggers a repaint because the visual transparency of the element changes, affecting how it is displayed.
• In Example 3, updating the border color changes the visual presentation of the border, leading to a repaint.

解释：

• 在示例 1中，更改 <div> 的背景颜色会导致重绘，因为元素的外观发生了变化，但其大小和位置保持不变。
• 在示例 2中，修改元素的透明度会触发重绘，因为元素的视觉透明度发生了变化，影响了它的显示方式。
• 在示例 3中，更新边框颜色会改变边框的视觉呈现，导致重绘。

2. Why is Repaint Less Expensive than Reflow?

为什么 Repaint 的开销小于 Reflow？

Repaint is less expensive than reflow because it only involves updating the visual appearance of elements without recalculating their layout. The browser simply needs to apply the new styles to the affected elements and update the pixels on the screen accordingly. This avoids the more intensive computations required for reflow, which involves determining the size and position of elements.

Repaint 的开销小于 Reflow，因为它只涉及更新元素的视觉外观，而无需重新计算它们的布局。浏览器只需将新样式应用到受影响的元素，并相应地更新屏幕上的像素。这避免了 Reflow 所需的更高强度计算，而 Reflow 涉及确定元素的大小和位置。

Performance Considerations

性能考虑

• Less Computational Overhead: Since repaint does not require layout recalculations, it is faster and less resource-intensive compared to reflow. However, frequent repaints can still cause performance issues, especially if they are triggered by animations or rapid changes in style.

• Frequent Repaints: If an application frequently triggers repaints (e.g., through continuous animations or rapid changes in element appearance), it can lead to performance degradation, causing the browser to work harder to keep up with the visual updates.

• 与 Reflow 相比，计算开销较小：由于 Repaint 不需要重新计算布局，因此它比 Reflow 更快，且资源消耗较少。然而，频繁的重绘仍可能导致性能问题，尤其是当它们由动画或样式的快速变化触发时。

• 频繁重绘：如果一个应用程序频繁触发重绘（例如，通过连续动画或元素外观的快速变化），它可能导致性能下降，导致浏览器需要更加努力地跟上视觉更新。

Example: Performance Impact of Frequent Repaints

示例：频繁 Repaint 的性能影响

// Bad Practice: Causes frequent repaints
let div = document.querySelector('div');
setInterval(() => {
    div.style.backgroundColor = div.style.backgroundColor === 'red' ? 'blue' : 'red';
}, 16); // Changing background color every 16ms

Explanation:

• In this example, the background color of a <div> element changes every 16ms, which can cause frequent repaints. This constant repainting can degrade performance, especially on devices with lower processing power.

解释：

• 在这个示例中，<div> 元素的背景颜色每 16 毫秒更改一次，这会导致频繁的重绘。这种持续的重绘可能会导致性能下降，尤其是在处理能力较低的设备上。

3. How to Minimize Repaint

如何最小化 Repaint

To optimize the performance of web pages, it’s important to minimize the frequency and scope of repaints. Here are some strategies to help reduce the impact of repaints:

为了优化网页性能，重要的是尽量减少 Repaint 的频率和范围。以下是一些帮助减少 Repaint 影响的策略：

1. Avoid Changing Styles Individually

避免单独更改样式

Instead of making multiple style changes one by one, batch them together to minimize the number of repaints.

与其逐一更改多个样式，不如将它们批量处理，以最小化 Repaint 的次数。

// Instead of this:
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

// Do this:
element.style.cssText = 'color: red; background-color: yellow;';

2. Use class or id for Bulk Changes

使用 class 或 id 进行批量更改

Applying changes using a class or id instead of directly modifying styles can help reduce the number of repaints.

使用 class 或 id 进行更改，而不是直接修改样式，可以帮助减少 Repaint 的次数。

// Instead of modifying styles one by one:
element.style.color = 'blue';
element.style.backgroundColor = 'green';

// Apply a class instead:
element.classList.add('blue-text-green-bg');

3. Minimize the Use of Expensive CSS Properties

最小化使用代价高昂的 CSS 属性

Some CSS properties, like box-shadow, border-radius, or filter, can trigger repaints that are more resource-intensive. Use them sparingly, especially in large or frequently changing elements.

一些 CSS 属性，如 box-shadow、border-radius 或 filter，可能会触发更耗资源的 Repaint。请谨慎使用它们，尤其是在大型或经常更改的元素中。

4. Optimize Animations

优化动画

Whenever possible, use CSS transitions and animations instead of JavaScript-driven animations. CSS animations are typically more efficient because they can be optimized by the browser’s rendering engine and run on the GPU, avoiding unnecessary repaints.

尽可能使用 CSS 过渡和动画，而不是 JavaScript 驱动的动画。CSS 动画通常更高效，因为它们可以由浏览器的渲染引擎优化并在 GPU 上运行，从而避免不必要的 Repaint。

/* Example of CSS animation */
.element {
    transition: background-color 0.3s ease;
}

.element:hover {
    background-color: orange;
}

5. Use transform and opacity for Animations

使用 transform 和 opacity 进行动画

Animations that use transform and opacity are more efficient because they typically only trigger repaints, not reflows. These properties can be handled by the GPU, resulting in smoother animations.

使用 transform 和 opacity 的动画更高效，因为它们通常只会触发 Repaint，而不会触发 Reflow。这些属性可以由 GPU 处理，从而实现更流畅的动画效果。

/* Example using transform for animation */
.element {
    transition: transform 0.5s ease-in-out;
}

.element:hover {
    transform: scale(1.1);
}

4. Conclusion

结论

Repaint is a less costly operation than reflow, but it can still impact performance if not

managed carefully. By understanding what triggers repaints and implementing best practices to minimize their occurrence, developers can ensure smoother and more responsive web pages. This not only improves the user experience but also optimizes the overall performance of web applications.

Repaint 是一种比 Reflow 开销较小的操作，但如果管理不当，它仍然会影响性能。通过理解触发 Repaint 的因素并实施最佳实践来最小化其发生，开发人员可以确保网页的流畅性和响应性。这不仅改善了用户体验，还优化了 Web 应用程序的整体性能。