什么是渲染树 Render tree?
再回顾一下浏览器工作步骤:
- 处理HTML标签构建DOM树。
- 处理CSS标签构建CSSOM树。
- DOM和CSSOM树被组合形成渲染树(渲染树只包含需要显示在页面的节点)。
- Layout(reflow)计算每个对象的确切位置和大小。
- 最后是绘制(Paint),把最终的渲染树对象渲染成屏幕像素。
渲染树生成的时候简单来说:
1,从DOM树根节点开始,遍历每个可见节点。
2,每个可见节点找到并应用对应的CSSOM规则。
3,返回计算好样式的内容
然后呢?
从渲染树知道了每个元素的位置和尺寸,下面就是Layout(reflow)了。根据设备的 viewport 计算每个元素该怎样展示。Layout 之后就是绘制过程了。
对性能有什么影响
根据内容样式不同,设备不同,每一步花费时间不太一样,但是页面越复杂,样式越多,每个步骤,特别是Layout会花费更多时间。
从上面的步骤看到,一旦DOM或者CSSOM发生改变,这些步骤都要全部重走一遍。如果短时间内频繁触发,或者页面太复杂导致某个步骤花费时间太多,就会导致页面帧率降低,页面变得卡顿。
参考链接:
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Render_tree_construction
Web Science - Browser Internals (Rendering - Constructing the DOM Tree)