回流(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布局