前端性能优化关键词:Render tree

什么是渲染树 Render tree

再回顾一下浏览器工作步骤:

  1. 处理HTML便签构建DOM树。
  2. 处理CSS标签构建CSSOM树。
  3. DOM和CSSOM树被组合形成渲染树(渲染树只包含需要显示在页面的节点)。
  4. Layout(reflow)计算每个对象的确切位置和大小。
  5. 最后是绘制(Paint),把最终的渲染树对象渲染成屏幕像素。

渲染树生成的时候简单来说:

1,从DOM树根节点开始,遍历每个可见节点。
2,每个可见节点找到并应用对应的CSSOM规则。
3,返回计算好样式的内容

然后呢?

从渲染树知道了每个元素的位置和尺寸,下面就是Layout(reflow)了。根据设备的 viewport 计算每个元素该怎样展示。Layout 之后就是绘制过程了。

对性能有什么影响

根据内容样式不同,设备不同,每一步花费时间不太一样,但是页面越复杂,样式越多,每个步骤,特别是Layout会花费更多时间。
从上面的步骤看到,一旦DOM或者CSSOM发生改变,这些步骤都要全部重走一遍。如果短时间内频触发,或者页面太复杂导致某个步骤花费时间太多,就会导致页面帧率降低,页面变得卡顿。

作者:Yukun

前端工程师