1.什么是重绘（replaint）和回流（relfow）
reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程。
repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。
2.什么会引起回流
笼统来说当页面的布局和几何属性发生变化的时候就会引起回流，具体来说可以分为5类：
1.dom树结构发生变化，比如说删除或者添加某一个node节点。
2.元素几何属性发生变化，包括padding、margin、height、width、border等。
3.页面渲染初始化。
4.获取某些属性。虽然浏览器引擎可能会针对重排做了优化，比如说opera,他会等到有足够的变化发生，或者等到一定时间，或者等一个线程结束，再一起处理，这样就只重绘一次，但是除了render数的直接变化，当获取一些属性时，浏览器为取得正确的值也会触发回流，这样使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。（这段我是直接引用的。。。）
5.浏览器窗口发生变化-resize事件发生时
现在我们大概都能得出的结论是：回流比重绘的代价要高，至于具体的花销跟render树有多少节点需要重新构建有关。
还有就是，回流一定会伴随着重绘，但是重绘不一定会引起回流。
3.我们要如何避免
上面的实例代码中可以看到一共七行代码引起了6次左右的回流、重绘（上面的代码我大老远从别的页面拿过来当然不只是就用那一次，哈哈），而且我们刚刚还知道了回流花销真是不小，那么浏览器是不是真的每次js语句引起了回流他就执行一下呢？恩，后面的内容我是看的参考资料的：等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
但是尽管浏览器挺机智地帮我们优化了代码，我们自己作死也是没救的，比如你去请求
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 请求了getComputedStyle(), 或者 IE的 currentStyle
浏览器为了给你返回一个比较精确的答案，他会提前flush队列，因为队列中可能会有影响这些值的操作。
所以我们可以做的是：
1.将那些改变样式的操作集合在一次完事，直接改变className或者cssText
2.让要操作的元素进行离线处理，处理完事以后再一起更新
（1）使用DocumentFragment进行缓存操作，引发一次回流和重绘
课外延伸：
DocumentFragment 节点不属于文档树，继承的 parentNode 属性总是 null。
不过它有一种特殊的行为，该行为使得它非常有用，即当请求把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。
其实他就是一个游离在DOM树外面的容器，所以你在把它插入文档节点之前，随便给他增删节点都不会引起回流
（2）使用display:none,只引发两次回流和重绘。道理跟上面的一样。因为display:none的元素不会出现在render树
（3）使用cloneNode和replaceChild技术，引发一次回流和重绘（这条其实没太明白）
3.不要经常访问会引起浏览器flush队列的属性，非要高频访问的话建议缓存到变量；
4.将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位；
5.尽量不要使用表格布局，如果没有定宽表格一列的宽度由最宽的一列决定，那么很可能在最后一行的宽度超出之前的列宽，引起整体回流造成table可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
