重排和重绘和回流哪个好

减少回流是更好的选择，因为重绘的开销相对较小，而回流的开销较大：1、当元素的外观样式发生改变时，浏览器会重新绘制这些元素，但布局不会改变；2、当元素的布局属性发生改变时，浏览器会重新计算元素的几何属性，并重新构建整个页面的布局。

本教程操作系统：Windows10系统、Dell G3电脑。

重排（reflow）、重绘（repaint）和回流（layout）是网页渲染过程中的不同步骤，它们对网站性能有着不同的影响。

• 重绘：当元素的外观样式（如颜色、背景）发生改变时，浏览器会重新绘制这些元素，但布局不会改变。重绘的性能开销相对较小，不会引起页面布局变化。

• 回流：当元素的布局属性（如位置、尺寸）发生改变时，浏览器会重新计算元素的几何属性，并重新构建整个页面的布局。回流的性能开销较大，会导致页面重新排版，其他元素也可能受到影响。

所以，重绘的开销相对较小，而回流的开销较大。一般来说，减少回流是更好的选择，因为它对网页性能的影响更大。

以下是一些减少回流的方法：

1. 使用 CSS3 动画：CSS3 动画使用 GPU 加速，可以减少回流次数。

2. 批量修改样式：避免频繁修改单个元素的样式，而是将多个修改集中在一起进行，减少回流次数。

3. 使用虚拟文档片段（Document Fragment）：通过创建虚拟文档片段，在内存中进行 DOM 操作，最后一次性将文档片段添加到页面中，减少回流次数。

4. 使用 CSS3 Transitions 或 Transforms：这些属性可以利用 GPU 加速，减少回流次数。

5. 避免强制同步布局：通过避免使用一些会触发回流的属性或方法，例如 offsetTop、offsetLeft 等。

需要根据具体情况来选择适合的优化策略。如果只是进行一些简单的样式修改，可能重绘的开销较小，而如果涉及复杂的布局变化，则需要注意减少回流次数。