回流和重绘
回流（Reflow）
浏览器花时间渲染，当某个部分发生了变化影响了布局，浏览器就需要重新构建渲染树（render tree），这就是回流。
引起reflow的原因：看定义就知道了，影响布局发生回流，那么什么操作会影响布局呢
1、dom树的变化
比如突然删除了某个node
1 var demo= document.getElementById("demo"); 2 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布局
