重绘和回流的异同，如何避免优化？

一、什么是重绘？

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。

二、什么是回流？

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

三、区别：

回流必将引起重绘，而重绘不一定会引起回流。

比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

四、过程：

不是修改完立马执行这个过程

浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

五、如何减少重绘和回流

1.CSS

• 使用transform替代top
• 使用visibility替换display:none,因为前者只会引起重绘，后者会引发回流（改变了布局）
• 避免使用table布局，可能很小的一个改动会造成整个table的重新布局
• 尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围。
• 避免设置多层内联样式，css选择符从右往左匹配查找，避免节点层级过多。
• 将动画效果应用到position属性为absolute或者fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流。同时，控制动画速度可以选择requestAnimationFrame。
• 避免使用css表达式，可能会引发回流。
• 将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点，例如will-change,video,iframe等标签，浏览器会自动将该节点变为图层。
• CSS3硬件加速(GPU加速)，使用CSS3硬件加速，可以让transform,opacity,filters这些动画不会引起回流重绘。

2.JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。