前言

在Web开发中，回流（reflow）和重绘（repaint）是页面渲染过程中常见的两种操作，它们会影响页面性能和用户体验。

回流（reflow）

• 回流是指浏览器重新计算并绘制页面布局的过程。当页面中的元素尺寸、位置或布局发生变化时，浏览器会触发回流以更新页面的布局。
• 回流会影响到整个页面的布局，可能导致其他元素的重新排列和重新绘制，是比较消耗性能的操作。
• 常见触发回流的操作包括改变窗口大小、添加或删除DOM元素、修改DOM元素的样式、计算元素的位置等。

重绘（repaint）

• 重绘是指浏览器重新绘制页面元素的过程，但不涉及布局的改变。当元素的样式发生变化，但不影响布局时，浏览器会触发重绘。
• 重绘不会导致页面的重新排列，只是重新绘制元素的外观，相比回流消耗的性能较少。
• 常见触发重绘的操作包括修改元素的颜色、背景、字体等样式属性。

重点

当触发回流时，一定会触发重绘，但是重绘不一定回流。

总结

• 避免频繁的回流和重绘操作，可以批量修改样式，避免多次单独操作元素。
• 使用CSS3动画代替JavaScript动画，可以减少回流和重绘次数。
• 使用transform和opacity等属性触发硬件GPU加速，减少回流和重绘的影响。
• 使用事件委托和文档片段来减少DOM操作，减少回流和重绘的开销。