回流与重绘是什么？

回流（Reflow）和重绘（Repaint）是浏览器渲染页面时的两个重要过程，它们直接影响网页的性能和用户体验。

回流（Reflow）

回流，也称为布局（Layout），是指浏览器为了重新计算文档中元素的几何属性（如位置、大小等）而需要重新计算布局的过程。当页面中的元素发生变化（如尺寸、位置、内容变化、新增或删除元素等）时，浏览器需要重新计算这些变化对其他元素的影响，这个过程就是回流。

触发回流的操作：

• 修改DOM元素的布局属性（如width、height、margin、padding等）。
• 修改DOM元素的位置（如top、left、right、bottom等）。
• 修改字体大小。
• 改变窗口大小。
• 查询某些布局属性（如offsetWidth、offsetHeight、clientWidth、clientHeight等）。

重绘（Repaint）

重绘是指当元素的外观发生变化（如颜色、背景色等），但没有改变布局时，浏览器会重新绘制这些元素的过程。重绘不会影响页面的布局，因此比回流的开销要小。

触发重绘的操作：

• 修改元素的颜色（如color、background-color等）。
• 修改元素的透明度（如opacity）。
• 修改元素的轮廓（如outline）。

回流与重绘的关系

• 回流必然导致重绘：当发生回流时，浏览器需要重新计算元素的几何属性，然后重新绘制这些元素，因此回流必然会导致重绘。
• 重绘不一定导致回流：如果只是修改元素的外观属性（如颜色），不会影响布局，只会触发重绘。

优化建议

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

   • 避免频繁操作DOM，尽量将多次操作合并成一次。
   • 使用DocumentFragment进行批量DOM操作。
   • 避免使用触发回流的CSS属性，如float、position: absolute等。

2. 使用CSS3动画：

   • CSS3动画在GPU上运行，不会触发回流和重绘，性能更好。

3. 避免频繁查询布局属性：

   • 将查询结果缓存起来，避免频繁查询触发回流。

4. 使用requestAnimationFrame：

   • 在动画循环中使用requestAnimationFrame，确保动画在每一帧中只进行一次回流和重绘。