前端RenderTree

浏览器工作步骤

1. 处理HTML标签生成DOM树。
2. 处理CSS标签构建CSSOM树。
3. Layout（reflow）计算每个对象的确切位置和大小。
4. 最后是绘制（Paint），把最终的渲染树对象渲染成屏幕像素。

渲染数生成的时候简单来说，

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

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

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