关于回流与重绘的小结

在谈回流与重绘之前先梳理一下，浏览器的渲染过程。
一、浏览器渲染过程

1、解析HTML，构建DOM树

2、解析CSS，生成CSS规则树

3、合并DOM树和CSS规则，生成render树

4、布局render树（Layout/回流），根据生成的render树，进行回流(Layout)，得到节点的几何信息（位置，大小）

5、绘制render树（paint/重绘），根据渲染树以及回流得到的几何信息，得到节点的绝对像素，绘制页面像素信息

6、浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上

二、回流、重绘基本概念

回流：在构造渲染树时，将可见的dom节点以及它对应的样式结合起来，可是我们需要计算他们在设备视口内的确切位置和大小，这个计算阶段就是回流。

重绘：在构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。

三、何时发生回流重绘
我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：
1、添加删除可见的dom元素
2、元素的位置发生改变
3、元素的尺寸改变（包括外边距，内边距、边框、高度宽度等）
4、内容发生变化，例如：文本或者图片被另一个不同尺寸大小的内容替换
5、页面一开始渲染的时候
6、浏览器窗口尺寸改变的时候（因为回流是根据视口的大小来计算的位置大小）
7、最复杂的一种：获取某些属性，引发回流
(1) offset(Top/Left/Width/Height)
(2) scroll(Top/Left/Width/Height)
(3) cilent(Top/Left/Width/Height)
(4) width,height
(5) 调用了getComputedStyle()或者IE的currentStyle

注意：回流一定会引起重绘
四、如何减少回流和重绘
1、 CSS中避免回流、重绘

（1）尽可能在DOM树的最末端改变class
回流可以自上而下，或自下而上的回流的信息传递给周围的节点。回流是不可避免的，但可以减少其影响。尽可能在DOM树的里面改变class，可以限制了回流的范围，使其影响尽可能少的节点
（2）避免设置多层内联样式
通过style属性设置样式，每个dom元素都会造成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一次回流
（3）动画效果应用到position属性为absolute或fixed的元素上
脱离文档流，减少回流的render tree的规模
（4）避免使用table布局
（5）使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘

2、JS操作避免回流、重绘
（1）避免使用JS一个样式修改完接着改下一个样式，最好一次性更改CSS样式，或者将样式列表定义为class的名称
（2）避免频繁操作DOM，使用文档片段创建一个子树，然后再拷贝到文档中
（3）先隐藏元素，进行修改后再显示该元素，因为display:none上的DOM操作不会引发回流和重绘
（4）避免循环读取offsetLeft等属性，在循环之前把它们存起来
（5）对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流