回流（重排）和重绘

作为一个web开发，经常会听到这两个词，除了“回流一定会引起重绘，但重绘不一定会回流”之外，对这两个概念理解的也不是很透彻。今天就整理一下吧

浏览器如何渲染一个页面呢

1. 解析HTML代码，生成DOM树；

2. 解析CSS样式表，生成CSSOM树；

3. DOM树和CSSOM树合成render tree；（不是完全匹配的，假如有样式为diaplay:none的元素节点，那该元素就不存在在render tree中）
   

4. layout（回流）：根据渲染树进行计算得到节点在设备视口内的位置大小的实际像素值，进行排列布局；

5. painting（重绘）：根据回流的结果所得到的像素值进行绘制；

6. display：页面展现

回流和重绘如何被触发

回流

1. 添加或者删除元素（display，overflow，remove/appendChild…）
2. 位置、大小（position、float、width、height、top…、xxxWidth/Height…、margin、padding…）
3. 元素内容改变（font…、text-align、line-height）
4. 视口大小改变

重绘

只要回流必然会进行重绘。
只发生重绘的一些情况：
color、visibility、background、box-shadow、outline、transfrom、opacity、filter等

浏览器渲染的队列机制

浏览器渲染队列机制：浏览器不会每检测到要回流重绘就去执行一次，而是将修改操作放入修改队列中，当达到一定时间或者一定数量的时候才会批量进行一次回流重绘。

但是，下列这些操作会强制刷新队列的style样式请求：
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle(), 或者 IE的 currentStyle

如何减少回流重绘次数

• 批量进行DOM操作，也可先隐藏再多次操作再添加到文档流
• 批量进行样式操作：利用style.cssText或者classname进行批量修改
• 使用visibility/opacity代替display
• 动画使用transform代替位移
• 复杂动画就可以使用绝对定位使其脱离文档流
• 避免修改操作和强制刷新队列的样式请求同时进行