前端性能优化关键词：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发生改变，这些步骤都要全部重走一遍。如果短时间内频繁触发，或者页面太复杂导致某个步骤花费时间太多，就会导致页面帧率降低，页面变得卡顿。

参考链接：

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)