Rendering in browser
Upcoming SlideShare
Loading in...5
×
 

Rendering in browser

on

  • 1,133 views

 

Statistics

Views

Total Views
1,133
Views on SlideShare
1,017
Embed Views
116

Actions

Likes
1
Downloads
16
Comments
0

2 Embeds 116

http://www.pushiming.com 115
url_unknown 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Rendering in browser Rendering in browser Presentation Transcript

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