重绘（repaint）和回流（reflow） 详解

浏览器的重绘（repaint）和回流（reflow）是指浏览器渲染引擎更新网页布局和样式时发生的过程。

1. 重绘（repaint）：

   • 重绘是指更新网页某个元素的可见样式，例如背景色、文本颜色等。
   • 重绘不会影响页面布局，只会更新元素的外观。
   • 重绘的消耗通常较小，可以频繁进行而不会造成明显的性能问题。

2. 回流（reflow）：

   • 回流是指更新网页的布局，例如改变元素的尺寸、位置、隐藏/显示等操作。
   • 回流会触发浏览器重新计算网页的布局，对整个渲染过程产生较大的影响。
   • 回流操作可能导致其他元素的位置、尺寸等属性发生变化，需要重新计算样式和排列，消耗较大的性能。
   • 当回流发生时，浏览器会重新构建 DOM 树和渲染树，进行布局与绘制。

使用场景：

• 需要避免频繁的回流和重绘，以提高页面性能。
• 避免多次读取和更改样式属性。可以使用 CSS 类的切换来批量操作样式属性。
• 在进行样式属性的更改前，将元素从 DOM 树中移除，或使用文档片段（Document Fragment）进行操作后再插入。
• 优先使用 CSS 动画（例如 transform 和 opacity），它们对于性能的影响较小。
• 使用 requestAnimationFrame 来对多次变更进行节流，以便在下一帧中进行布局与绘制。
• 避免在循环中进行 DOM 的操作和读取。

需要注意的是，虽然回流和重绘消耗一定的性能，但在一般场景下，现代浏览器已经做了优化，可以处理大部分的视觉变化。只有在需要频繁更新大量元素属性时，才需要特别关注回流和重绘的性能问题。