回流和重绘

回流（Reflow）

　　浏览器花时间渲染，当某个部分发生了变化影响了布局，浏览器就需要重新构建渲染树（render tree），这就是回流。

引起reflow的原因：看定义就知道了，影响布局发生回流，那么什么操作会影响布局呢

　　1、dom树的变化

　　　　比如突然删除了某个node

var demo= document.getElementById("demo");
demo.parentNode.removeChild(demo);

　　2、页面渲染初始化的时候

　　3、元素几何属性变化，包括margin,padding,height,width,border等

　　　　比如突然增加图片的高度

document.getElementByTagName(img).style.width = 200px;

　　4、获取某些属性时

　　　　获取某些属性。虽然浏览器引擎可能会针对重排做了优化，比如Opera，它会等到有足够 数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。但除了render树的直接变化，当获取一些属性时，浏览器为取得 正确的值也会触发回流。这样就使得浏览器的优化失效了。这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。

　　5、浏览器窗口发生改变，resize事件发生时。

　　回流必定会伴随着重绘

重绘（Repaint）

　　如果只是改变了某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘，重画某一部分。

如何减少Reflow/Repaint

1、不要一条条地修改Dom的样式，与其这样，不如预先定好css 的class，然后修改dom的className。这个就很好理解了，就是千刀万剐和砍头的区别

2、不要吧Dom节点的属性值放在一个循环里当成循环里的变量.....

3、为动画的HTML元件使用fixed或者absoult，跳出文档流，这样修改css是不会发生reflow的

4、尽量不要使用table布局