介绍下重绘和回流（Repaint & Reflow）、以及如何进行优化

Question

在网页的渲染过程中，浏览器会经历两个主要的过程： 重绘 （Repaint）和 回流 （Reflow）。这两个过程是网页更新的核心，它们对性能和用户体验有很大的影响。以下是对这两个概念的详细介绍以及如何优化它们。

重绘（Repaint）

什么是重绘？

• 定义 : 重绘是指浏览器重新绘制一个元素的外观，例如颜色、背景色、边框等，但不会改变元素的位置和布局。
• 触发原因 : 当元素的视觉样式发生变化但其几何属性（如位置和大小）不变时，浏览器会进行重绘。例如，修改背景色或文字颜色。

如何优化重绘？

1. 最小化样式更改 :

• 尽量将样式更改集中在一起，减少触发重绘的次数。

1. 批量更新样式 :

• 使用类名批量更新样式而不是逐个属性修改。这样可以减少样式计算的次数。

1. 使用 will-change :

• 对将来可能改变的属性使用 will-change 提示浏览器可以优化这些属性的渲染。

回流（Reflow）

什么是回流？

• 定义 : 回流是指浏览器重新计算元素的位置和大小，从而重新布局整个页面。回流不仅涉及到元素的几何属性，还涉及到它们如何影响其他元素的布局。
• 触发原因 : 当元素的几何属性（如宽度、高度、位置等）发生变化时，会触发回流。例如，改变元素的尺寸、添加或删除元素、修改 display 属性等。

如何优化回流？

1. 减少回流的次数 :

• 尽量减少对 DOM 的频繁操作。如果需要对多个元素进行更改，应该尽量批量操作。

1. 使用文档碎片（Document Fragment） :

• 在对大量 DOM 操作时，先在文档碎片中完成更改，再将其添加到实际的 DOM 中，以减少回流的频率。

1. 避免强制同步布局 :

• 避免在 JavaScript 中多次读取和写入布局属性，这样会强制浏览器同步计算布局，导致性能问题。

1. 优化 CSS :

• 使用尽可能简单的选择器来避免复杂的计算，避免使用会引起大量回流的 CSS 属性。

1. 利用 transform 和 opacity :

• 对于需要动态更新的元素，尽量使用 transform 和 opacity 属性，因为这些属性的更新不会引起回流，只会引起重绘。

1. 减少 DOM 复杂度 :

• 尽量减少 DOM 的深度和复杂度，减少布局计算的复杂性。

总结

• 重绘 （Repaint）是指在元素的外观发生变化时（如颜色、背景色），浏览器需要重新绘制这些变化，但不改变元素的布局。
• 回流 （Reflow）是指在元素的位置和大小发生变化时，浏览器需要重新计算和更新整个页面的布局。

优化建议 :

• 减少 DOM 操作频率 ，批量处理变更。
• 尽量减少引发回流的样式更改 ，将样式更改集中处理。
• 使用更高效的 CSS 属性 ，如 transform 和 opacity ，避免引起回流。

通过优化这些操作，可以显著提升网页的渲染性能，改善用户体验。