Rendering: Repaint, reflow/relayout, restyle<br />fahai [at] TaobaoUED<br />
Rendering<br />HTML:<br /><ul><li>标签节点</li></ul>DOM Tree<br />用户操作:<br /><ul><li>拉伸窗口
缩放字体</li></ul>Render Tree<br />Paint<br /><ul><li>UA 设置
样式表
内联样式</li></ul>Styles Structure<br />
Render Tree<br />去除非视觉节点<br />去除隐藏节点<br />为所有节点(包括 textNode)建立 box(Mozilla 叫做 frame)<br />根:RenderView<br />从(0,0)到(window...
Reflow<br />重新计算页面元素位置和几何结构<br />渲染树中的一些节点被重新验证或者大小被重新计算<br />至少 reflow 一次:页面加载后<br />
Repaint<br />屏幕中的一些显示需要更新<br />比如背景色的改变<br />
Reflow & Repaint are Expensive<br />增删改 DOM 节点<br />display: none<br />visibility: hidden<br />动画<br />添加样式表<br />用户行为:缩放,...
Browsers are Smart<br />建立缓冲队列<br />某些操作在破坏这种优化机制:offsetTop/Left/Width/Height<br />
Solution<br />不要一个一个地去直接修改元素的样式,最好去修改样式表,然后修改元素的 className<br />批量处理 DOM 操作,最好不要在当前的 DOM 树中直接操作。比如:使用documentFragment来暂存一些...
Upcoming SlideShare
Loading in …5
×

Rendering in browser

1,480 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,480
On SlideShare
0
From Embeds
0
Number of Embeds
119
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Rendering in browser

  1. 1.
  2. 2. Rendering: Repaint, reflow/relayout, restyle<br />fahai [at] TaobaoUED<br />
  3. 3. Rendering<br />HTML:<br /><ul><li>标签节点</li></ul>DOM Tree<br />用户操作:<br /><ul><li>拉伸窗口
  4. 4. 缩放字体</li></ul>Render Tree<br />Paint<br /><ul><li>UA 设置
  5. 5. 样式表
  6. 6. 内联样式</li></ul>Styles Structure<br />
  7. 7. Render Tree<br />去除非视觉节点<br />去除隐藏节点<br />为所有节点(包括 textNode)建立 box(Mozilla 叫做 frame)<br />根:RenderView<br />从(0,0)到(window.innerWidth,window.innerHeight)<br />
  8. 8. Reflow<br />重新计算页面元素位置和几何结构<br />渲染树中的一些节点被重新验证或者大小被重新计算<br />至少 reflow 一次:页面加载后<br />
  9. 9. Repaint<br />屏幕中的一些显示需要更新<br />比如背景色的改变<br />
  10. 10. Reflow & Repaint are Expensive<br />增删改 DOM 节点<br />display: none<br />visibility: hidden<br />动画<br />添加样式表<br />用户行为:缩放,滚动<br />
  11. 11. Browsers are Smart<br />建立缓冲队列<br />某些操作在破坏这种优化机制:offsetTop/Left/Width/Height<br />
  12. 12. Solution<br />不要一个一个地去直接修改元素的样式,最好去修改样式表,然后修改元素的 className<br />批量处理 DOM 操作,最好不要在当前的 DOM 树中直接操作。比如:使用documentFragment来暂存一些操作;先将要进行操作的 DOM 节点 clone,更改完毕之后再去替换当前的节点<br />避免一直计算元素样式<br />减少不必要的 DOM 层级<br />如果做复杂的表现变化,如动画,让它脱离文档流<br />
  13. 13. Will it Reflow?<br />更改 className<br />更新 cssText<br />对样式表 addRule<br />display: none<br />documentFragment<br />
  14. 14. Reference<br />www.phpied.com/rendering-repaint-reflowrelayout-restyle/<br />www.phpied.com/the-new-game-show-will-it-reflow/<br />
  15. 15. Thanks<br />

×