如何最小化重绘和回流?

1.概念

重绘(Repaint):当元素的一部分属性发生改变,例如外观,背景,颜色等不会引起布局的变化,只需要浏览器根据元素的新属性重新绘制,使元素呈现新的外观 叫做重绘.

回流(reflow):当渲染树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程.

2.关系

回流必然导致重绘,重绘不一定会引起回流

3.最小化重绘和回流的方法

(1)元素进行复杂操作时候,可以先隐藏(display:none),操作完后在显示

(2)避免使用css表达式,因为每次都会重新计算

(3)尽量使用css属性简写,如:用border代替border-width,border-color

(4)批量修改元素样式: elem.style.xxx

(5)需要创建多个DOM节点时,使用DocumentFragment创建完后一次性加入