2. Rendering: Repaint, reflow/relayout, restyle fahai [at] TaobaoUED

5. 样式表

6. 内联样式Styles Structure

7. Render Tree 去除非视觉节点 去除隐藏节点 为所有节点（包括 textNode）建立 box（Mozilla 叫做 frame） 根：RenderView 从（0，0）到（window.innerWidth，window.innerHeight）

8. Reflow 重新计算页面元素位置和几何结构 渲染树中的一些节点被重新验证或者大小被重新计算 至少 reflow 一次：页面加载后

9. Repaint 屏幕中的一些显示需要更新 比如背景色的改变

10. Reflow & Repaint are Expensive 增删改 DOM 节点 display: none visibility: hidden 动画 添加样式表 用户行为：缩放，滚动

11. Browsers are Smart 建立缓冲队列 某些操作在破坏这种优化机制：offsetTop/Left/Width/Height

12. Solution 不要一个一个地去直接修改元素的样式，最好去修改样式表，然后修改元素的 className 批量处理 DOM 操作，最好不要在当前的 DOM 树中直接操作。比如：使用documentFragment来暂存一些操作；先将要进行操作的 DOM 节点 clone，更改完毕之后再去替换当前的节点 避免一直计算元素样式 减少不必要的 DOM 层级 如果做复杂的表现变化，如动画，让它脱离文档流

13. Will it Reflow? 更改 className 更新 cssText 对样式表 addRule display: none documentFragment

14. Reference www.phpied.com/rendering-repaint-reflowrelayout-restyle/ www.phpied.com/the-new-game-show-will-it-reflow/

15. Thanks