什么是重绘（Repaint）和回流（Reflow）？如何优化？

推荐答案

什么是重绘（Repaint）和回流（Reflow）？

• 重绘（Repaint）：当元素的样式发生变化但不影响布局时，浏览器会重新绘制该元素，这个过程称为重绘。例如，改变元素的颜色、背景色等。
• 回流（Reflow）：当元素的布局发生变化时，浏览器需要重新计算元素的几何属性，并重新构建渲染树，这个过程称为回流。例如，改变元素的宽度、高度、位置等。

如何优化？

1. 减少回流和重绘的次数：

   • 使用 transform 和 opacity 来实现动画，而不是直接操作 top、left 等属性。
   • 使用 classList 来批量修改样式，而不是逐个修改 style 属性。
   • 避免频繁操作 DOM，可以使用 DocumentFragment 或 cloneNode 来批量操作 DOM。

2. 使用 CSS 硬件加速：

   • 使用 will-change 属性来告诉浏览器哪些元素可能会发生变化，从而提前优化。
   • 使用 translate3d 或 translateZ(0) 来触发 GPU 加速。

3. 避免强制同步布局：

   • 避免在 JavaScript 中频繁读取布局属性（如 offsetTop、offsetWidth 等），因为这些操作会强制浏览器进行同步布局计算。

4. 使用 requestAnimationFrame：

   • 使用 requestAnimationFrame 来优化动画性能，确保动画在每一帧开始时执行。

5. 优化 CSS 选择器：

   • 避免使用过于复杂的选择器，减少浏览器匹配选择器的时间。

本题详细解读

重绘（Repaint）

重绘是指当元素的样式发生变化但不影响布局时，浏览器会重新绘制该元素。重绘的代价相对较小，因为它只涉及像素的重新绘制，而不涉及布局的重新计算。

回流（Reflow）

回流是指当元素的布局发生变化时，浏览器需要重新计算元素的几何属性，并重新构建渲染树。回流的代价较大，因为它涉及到布局的重新计算和渲染树的重新构建。

优化策略

1. 减少回流和重绘的次数：

   • 通过批量修改样式或使用 transform 和 opacity 来减少回流和重绘的次数。

2. 使用 CSS 硬件加速：

   • 通过 will-change 属性和 translate3d 或 translateZ(0) 来触发 GPU 加速，减少回流和重绘的开销。

3. 避免强制同步布局：

   • 避免在 JavaScript 中频繁读取布局属性，以减少强制同步布局的次数。

4. 使用 requestAnimationFrame：

   • 通过 requestAnimationFrame 来优化动画性能，确保动画在每一帧开始时执行，减少不必要的回流和重绘。

5. 优化 CSS 选择器：

   • 通过简化 CSS 选择器来减少浏览器匹配选择器的时间，从而减少回流和重绘的开销。

通过这些优化策略，可以显著提升前端页面的性能，减少不必要的回流和重绘，从而提高用户体验。