浏览器的渲染机制
解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
Display:将像素发送给GPU，展示在页面上。
CSS重绘（Repaint）和重排（回流reflow）
重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。
重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）
产生重排（回流）的情况：
-
添加或者删除可见的DOM元素； -
元素位置改变； -
元素尺寸改变——边距、填充、边框、宽度和高度 -
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
-
页面渲染初始化；
-
浏览器窗口尺寸改变——resize事件发生时；
产生重绘的情况：
-
设置背景图片 -
修改字体颜色 -
改变 visibility 属性值
重排一定会触发重绘，而重绘不一定会重排
优化重绘的策略
-
将多次改变样式属性的操作合并成一次操作。
-
将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
-
在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。
-
由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
-
在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。
