【重绘】和【回流】概念以及如何减少回流

重绘：重绘是指只改变样式，不改变布局。重绘会导致浏览器重新绘制元素。

哪些会导致重绘：修改元素的背景颜色、字体颜色等等

回流：当前元素的布局属性发生改变，浏览器需要重新计算元素在页面中的布局的过程。

哪些会导致回流：修改元素的宽、高、位置等等

 

重绘和回流的差异：回流的成本比重绘高得多，因为回流需要重新计算元素得几何属性和页面布局，而重绘只是重新绘制样式。

如何减少回流带来的开销呢？

1、使用CSS动画代替JavaScript动画。CSS动画利用GPU加速，在性能方面通常比JavaScript动画更加高效。使用CSS的transform 和 Opacity 属性来创建动画，而不是改变布局，如宽、高

2、使用translate3d 开启硬件加速：将元素的位移属性设置为translate3d(0,0,0)，可以强制使用GPU加速。这样可以避免回流，提高动画的流畅度

3、避免频繁设置影响布局的样式属性：当需要对元素频繁的进行样式修改，可以合并为一次性操作，通过 添加/移除 CSS类来一次性改变多个样式属性。避免一个一个进行修改处理

4、使用requestAnimationFrame：通过这个方法进行调用动画帧，可以确保动画在浏览器的重绘周期内执行，从而避免不必要的回流。这个方法可以确保动画在最佳时间点进行渲染

5、使用文档片段(Document Fragment)： 当我们需要大量插入新元素，可以将新元素加到文档片段中，然后将文档片段一次性插入DOM中。这样可以减少回流次数(虚拟dom)。【注意】只是减少回流次数

6、让元素脱离文档流：position: absolute\fixed；float：left。【注意】只是减少回流

　　使用visibility: hidden 代替display: none。【理由】visibility 元素依旧占位 不会触发回流；display：none 会将元素从渲染树中移除，从而引起回流