Rendering: Repaint, reflow/relayout, restyle

fahai [at] TaobaoUED

Rendering

DOM Tree

Styles Structure

Render Tree Paint

HTML：

•标签节点

•UA 设置

•样式表

•内联样式

用户操作：

•拉伸窗口

•缩放字体

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