什么是渲染树 Render tree
再回顾一下浏览器工作步骤：
- 处理HTML便签构建DOM树。
- 处理CSS标签构建CSSOM树。
- DOM和CSSOM树被组合形成渲染树（渲染树只包含需要显示在页面的节点）。
- Layout（reflow）计算每个对象的确切位置和大小。
- 最后是绘制（Paint），把最终的渲染树对象渲染成屏幕像素。
渲染树生成的时候简单来说：
1，从DOM树根节点开始，遍历每个可见节点。
2，每个可见节点找到并应用对应的CSSOM规则。
3，返回计算好样式的内容
然后呢？
从渲染树知道了每个元素的位置和尺寸，下面就是Layout（reflow）了。根据设备的 viewport 计算每个元素该怎样展示。Layout 之后就是绘制过程了。
对性能有什么影响
根据内容样式不同，设备不同，每一步花费时间不太一样，但是页面越复杂，样式越多，每个步骤，特别是Layout会花费更多时间。
从上面的步骤看到，一旦DOM或者CSSOM发生改变，这些步骤都要全部重走一遍。如果短时间内频触发，或者页面太复杂导致某个步骤花费时间太多，就会导致页面帧率降低，页面变得卡顿。