一文读懂回流(重排)重绘

回流与重绘

回流重绘是指在网页中进行布局、样式等操作时，浏览器需要重新计算元素的位置和大小（回流）以及重新绘制元素的样式（重绘）的过程。这个过程会消耗很多的计算资源，因此需要尽量减少回流和重绘的次数，以提高网页的性能。

回流和重绘的触发条件包括：

当页面布局和几何属性发生变化时，会触发回流和重绘，比如改变元素的位置、大小、边距、填充等。

当元素的样式发生变化时，会触发重绘，比如修改元素的颜色、背景、字体等。

回流何时发生：

1、当页面首次加载时，浏览器需要进行初始的回流和重绘来计算和显示页面的布局和样式。

2、当页面的 DOM 结构发生变化，比如增加、删除、移动元素，或者修改元素的样式、尺寸等，都可能引起回流。

3、当浏览器窗口大小发生变化时，需要重新计算元素的布局和位置来适应新的窗口大小。

重绘何时发生：

1、回流发生必定引发重绘

2、修改元素的样式，但不影响布局的情况，例如修改元素的颜色、背景色、文本样式等

3、添加或移除元素的类，但不会导致尺寸或位置的变化，会触发重绘但不引起回流。

为了减少回流和重绘的次数，可以采取以下措施：

1、使用 CSS3 的 transform 和 opacity 属性，它们不会触发回流和重绘，而是直接交给GPU处理可以实现一些动画效果。 transform、opacity、filter也是更新视图的第三种方式： 合成，也是常说的GPU加速，在合成的情况下，直接跳过布局和绘制的过程，进入 非主线程 处理部分，交给 合成线程 处理，充分发挥GPU优势，可以使用transform 替代 top

2、将需要频繁操作的样式变化合并在一起，然后一次性修改元素的样式，减少触发回流和重绘的次数。

3、动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame，其底层原理就是利用了第2点

4、尽量避免在循环中频繁修改元素的样式，可以先将元素的样式存储在变量中，然后一次性修改元素的样式。

5、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局）

6、不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局

7、CSS 选择符从右往左匹配查找， 避免节点层级过多

8.将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层。 will-change: transform;