最小化重绘和回流

什么是重绘和回流

• 重绘： 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。
• 回流 当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程
• 重绘与回流的区别 重绘不一定需要回流(比如颜色的改变)，回流必然导致重绘(比如改变网页位置)

方法 1、需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示

2、需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

3、尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）

4、避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）

5、尽量使用 css 属性简写，如：用 border 代替 border-width, border-style,border-color

6、批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx