重绘和回流

来源：佛山兄弟连IT培训学校时间：2019/8/16 8:43:06

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。比如上面的img文件加载完成后就会引起回流，每个页面至少需要一次回流，就是在页面第一次加载的时候。

当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

从上面可以看出，回流必将引起重绘，而重绘不一定会引起回流。会引起重绘和回流的操作如下：

添加、删除元素(回流+重绘)

隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)

移动元素，比如改变top,left的值，或者移动元素到另外一个父元素中。(重绘+回流)

对style的操作(对不同的属性操作，影响不一样)

还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)

另外，transform

操作不会引起重绘和回流，是一种高效率的渲染。这是因为transform属于合成属性，对合成属性进行transition/animation

动画时将会创建一个合成层，这使得动画元素在一个独立的层中进行渲染，当元素的内容没有发生改变，就没必要进行重绘，浏览器会通过重新复合来创建动画帧。