浏览器渲染之重绘重排

重绘和重排定义

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

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

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

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

如何最小化重绘(repaint)和回流(reflow)？

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

• 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document

• 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流

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

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

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

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