浏览器回流和重绘

浏览器渲染过程图：

重上图可以大致了解到浏览器渲染文档过程

1.HTML Parser 解析HTML，生成DOM Tree，CSS Parser 解析CSS，生成CSSOM树

2.结合DOM Tree 和 CSSOM树，生成Render Tree。

3.根据生成的渲染树，计算元素节点的几何信息，包括位置大小等信息，此操作对应回流

4.根据渲染树和回流得到信息，进行页面渲染的过程，此操作对应重绘。

如果直接对DOM节点进行操作，修改DOM节点的大小、位置等几何属性，会导致DOM树的结构变化，浏览器会重新构建DOM树，这个过程叫做回流。

如果直接修改DOM的颜色，DOM的结构不会发生变化，页面布局也不会改变，浏览器不会重新构建DOM树，但是会重新渲染页面，这个过程就是重绘的过程。

从上面可以看出，回流一定会重绘，但是重绘不一定导致回流。

浏览器优化:

 一 尽量减少一下属性的优化，如果一定要访问，对它们进行批量操作。

• offsetTop,offsetLeft,offsetWidth,offsetHeight
• scrollTop,scrollLeft,scrollWidth,scrollHeight
• clientTop,clientLeft,clientWidth,clientHeight
• width,height
• getComputedStyle()

二 让要操作的元素进行”离线处理”，处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

三 给元素添加绝对定位，使其脱离文档流再进行操作。