重绘与回流

重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘

回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态）发生改变时，产生重绘（回流）

注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值。

回流必将引起重绘，而重绘不一定会引起回流。

如何最小化repaint和reflow?

• 要对元素进行复杂操作时，可以先隐藏（display:“none”）,操作完成后再显示
• 需创建多个DOM节点时，使用DocumentFragment创建完成后一次性的加入document
• 缓存Layout属性值，如：var left=elem.offsetLeft;这样，多次使用left值产生一次回流；
• 尽量避免使用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
• 避免使用CSS表达式，因为每次调用都会重新计算值（包括加载页面）
• 尽量使用CSS属性简写，如：用border代替border-width，border-style等
• 批量修改元素样式：elem.className和elem.style.cssText代替elem.style.xxx