回流(reflow)与重绘(repaint)

页面的显示过程分为以下几个阶段：

1、生成DOM树(包括display:none的节点)

2、在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)

3、在render树的基础上继续渲染颜色背景色等样式

reflow：当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流；

repaint：当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘。

重绘的代价要比回流小，毕竟重绘只涉及样式的改变，不涉及到布局。

引发回流：
1、页面渲染初始化
2、DOM结构变化，比如删除了某个节点
3、render树变化，比如减少了padding
4、窗口resize事件触发
5、最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
这些属性包括

offsetTop, offsetLeft, offsetWidth, offsetHeightscrollTop/Left/Width/HeightclientTop/Left/Width/Heightwidth,height调用了getComputedStyle(), 或者 IE的 currentStyle

三、减少回流的方法：
1、避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2、避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
3、避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
4、将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高