在浏览器渲染页面的过程中，会涉及到重排（Reflow）、重绘（Repaint）和回流（Reflow）这三个概念。它们都是指浏览器更新页面内容的过程，但具体含义和触发条件有所不同：
重绘（Repaint）
重绘是指当页面中某些元素的样式发生变化，但不影响元素在文档流中的位置时，浏览器会重新绘制这些元素的外观。重绘的过程通常涉及以下几个步骤：
- 更新元素的样式，如颜色、字体样式等。
- 重新绘制元素的外观。 重绘不会改变页面的布局，因此成本较低。以下是一些常见的触发重绘的操作：
- 改变元素的背景颜色、文字颜色、边框颜色等。
- 改变元素的可见性（visibility）。
- 添加或移除样式类。
重排（Reflow）
重排（也称为回流）是指当页面中某些元素的大小、位置、布局发生改变，需要重新计算元素的位置和几何信息，浏览器会重新构建页面布局。重排是一个开销较大的过程，因为它可能涉及到整个文档的布局。以下是一些常见的触发重排的操作：
- 改变元素的宽高、边距、边框、填充等。
- 添加或移除DOM元素。
- 改变窗口大小或字体大小。
- 访问或修改某些DOM元素的属性，如offsetTop、offsetLeft、clientWidth等。
回流（Reflow）
回流实际上是重排的另一种说法，在中文社区中这两个词经常被交替使用。它们都指的是浏览器需要重新计算元素的布局位置和大小。
区别总结
- 重绘（Repaint）：仅影响元素的样式，不会改变元素的布局位置。例如，改变背景颜色、文字颜色等。
- 重排（Reflow）：影响元素的布局位置和几何信息，例如，改变元素的宽高、位置等。 由于重排是一个开销较大的操作，因此在开发过程中应该尽量减少重排的发生。例如，可以通过以下方式：
- 集中修改样式，而不是频繁地修改单个样式属性。
- 使用
transform和opacity进行动画处理，因为它们不会触发重排。 - 使用绝对定位将元素脱离文档流，这样它的变化不会影响到其他元素。
- 避免在循环中访问DOM元素的布局属性，可以先读取然后存储起来。
通过减少重绘与重排可以起到一定的性能优化效果。