重绘（Repaint）#

重绘是指当页面中某些元素的样式发生变化，但不影响元素在文档流中的位置时，浏览器会重新绘制这些元素的外观。重绘的过程通常涉及以下几个步骤：

• 更新元素的样式，如颜色、字体样式等。
• 重新绘制元素的外观。 重绘不会改变页面的布局，因此成本较低。以下是一些常见的触发重绘的操作：
• 改变元素的背景颜色、文字颜色、边框颜色等。
• 改变元素的可见性（visibility）。
• 添加或移除样式类。

重排（Reflow）#

重排（也称为回流）是指当页面中某些元素的大小、位置、布局发生改变，需要重新计算元素的位置和几何信息，浏览器会重新构建页面布局。重排是一个开销较大的过程，因为它可能涉及到整个文档的布局。以下是一些常见的触发重排的操作：

• 改变元素的宽高、边距、边框、填充等。
• 添加或移除DOM元素。
• 改变窗口大小或字体大小。
• 访问或修改某些DOM元素的属性，如offsetTop、offsetLeft、clientWidth等。

回流（Reflow）#

回流实际上是重排的另一种说法，在中文社区中这两个词经常被交替使用。它们都指的是浏览器需要重新计算元素的布局位置和大小。

区别总结#

• 重绘（Repaint）：仅影响元素的样式，不会改变元素的布局位置。例如，改变背景颜色、文字颜色等。
• 重排（Reflow）：影响元素的布局位置和几何信息，例如，改变元素的宽高、位置等。 由于重排是一个开销较大的操作，因此在开发过程中应该尽量减少重排的发生。例如，可以通过以下方式：
• 集中修改样式，而不是频繁地修改单个样式属性。
• 使用transform和opacity进行动画处理，因为它们不会触发重排。
• 使用绝对定位将元素脱离文档流，这样它的变化不会影响到其他元素。
• 避免在循环中访问DOM元素的布局属性，可以先读取然后存储起来。

通过减少重绘与重排可以起到一定的性能优化效果。