前端RenderTree

瀏覽器工作步驟

1. 處理HTML標籤生成DOM樹。
2. 處理CSS標籤構建CSSOM樹。
3. Layout（reflow）計算每個物件的確切位置和大小。
4. 最後是繪製（Paint），把最終的渲染樹物件渲染成螢幕畫素。

渲染數生成的時候簡單來說，

1. 從DOM樹根節點開始，遍歷每個可見節點。
2. 每個可見節點找到並應用對應的CSSOM規則。
3. 返回計算好樣式的內容。

然後呢？
從渲染樹知道了每個元素的位置和尺寸，下面就是Layout（reflow）了，根據裝置的viewport計算每個元素該怎樣展示。Layout之後就是繪製過程了。

對效能有什麼影響？
根據內容樣式不同，裝置不同，每一步花費時間不太一樣，但是頁面越複雜，樣式越多，每個步驟，特別是Layout會花費更多時間。
從上面步驟看到，一旦DOM或者CSSOM發生改變，這些步驟都會全部再走一遍。如果短時間內頻繁觸發，或者頁面太複雜，導致某個步驟花費時間太多，就會導致頁面幀率降低，頁面變的卡頓。