什么是浏览器的回流和重绘？

先上个流程图（网上找的）

HTML——>HTML Parser ——>DOM Tree ——>

Style Sheets——>CSS Parser——>Style Rules——>

Attachment——>Render Tree——>painting——>display

具体步骤：

1.解析HTML，构建DOM数；

2.解析CSS，生成样式规则；

3.合并DOM数和样式规则，生成渲染树；

4.布局render Tree(layout reflow) 负责个元素的位置尺寸的计算；

5.绘制render Tree，绘制页面像素信息；

6.浏览器将各层的信息发送给GPU，GPU将各层合成显示在浏览器屏幕上。

什么是回流（reflow）？

答：当渲染树的一部分或全部元素的尺寸，布局，隐藏（display）等改变时，浏览器重新渲染DOM或全部DOM的过程。

什么是重绘（repaint）？

答：当页面元素样式改变不影响元素在文档流中的位置时，例如backgorund-color,visibility等。浏览器只会将新的样式重新赋予给元素并进行重新绘制操作。

回流一定会引起重绘，但重绘不一定会引起回流。

如何减少回流、重绘？

        1. css中避免回流、重绘:

        1) 尽可能在dom树的最末端改变class;

        2) 避免设置多层内联样式;

        3) 动画效果应用到position属性为absolute或fixed的元素上;

        4) 避免使用table布局(因为改变table的某个元素或样式会引起整个table的重绘和回流);

        5) 使用css3硬件加速，可以让transform、opacity、filters等动画效果不会引起回流重绘;

        2. js操作避免回流、重绘:

        1) 避免使用js一个样式修改完接着改下一个样式，最好一次性更改css样式，或者将样式列表定义为class的名称;

        2) 避免频繁操作dom，使用文档片段创建一个子树，然后再拷贝到文档中;

        3) 先隐藏元素，进行修改后再显示该元素，因为display:none上的dom操作不会引发回流和重绘;

        4) 避免循环读取offsetleft等属性，在循环之前把它们存起来;

        5) 对于复杂动画效果,使用绝对定位让其脱离文档流，否则会引起父元素及后续元素大量的回流;

注意：绝对定位的元素脱离了文档留，可以避免父级元素的回流，但是改变其位置属性如style.left仍然会导致其子元素回流。