• DOM 樹與 CSSOM 樹融合成渲染樹。
• 渲染樹只包括渲染頁面需要的節點。
• 佈局計算每個物件的精確位置及尺寸。
• 最後一步的繪製，輸入確定的渲染樹，在螢幕上渲染畫素。

構建渲染樹

為了構建渲染樹，瀏覽器大致做了如下：

• 從 DOM 樹的根節點開始，遍歷每個可見的節點。
• 某些節點完全不可見（例如 script 標籤、meta 標籤等），因為它們不會在渲染結果中反映，所以會被忽略。
• 某些節點通過 CSS 隱藏，因此在渲染樹中也會被忽略。比方說，上面例子中的 span 節點，因為該節點有一條顯式規則設定了 display:none 屬性，所以不會出現在渲染樹中。
• 給每個可見節點找到相應匹配的 CSSOM 規則，並應用這些規則。
• 發射可見節點，連帶其內容及計算的樣式。

佈局過程輸出一個「盒模型」，它精確捕獲每個元素在視口中的準確位置及尺寸：所有相對度量單位都被轉換為螢幕上的絕對畫素位置

上述每一步都需要瀏覽器完成大量的工作，這也意味著它通常很耗時。所幸，Chrome DevTools 可以幫助我們深入瞭解上述三個階段。

佈局階段

• Timeline 中，”Layout” 事件捕獲渲染樹的構建及位置、尺寸的計算。
• 一旦佈局完成，瀏覽器便釋出 ‘Paint Setup’ 與 ‘Paint’ 事件，將渲染樹轉化為螢幕上的實際畫素。

渲染樹的構建、佈局與繪製所需的時間取決於文件大小、應用的樣式，當然，還有執行文件的裝置：文件越大，瀏覽器要完成的工作就越多；樣式越複雜，繪製需要的時間就越長（例如，繪製單色成本較低，而 計算、呈現陰影

瀏覽器執行的所有步驟

讓我們快速回顧一下瀏覽器執行的所有步驟：

• 處理 HTML 標記，構建 DOM 樹。
• 處理 CSS 標記，構建 CSSOM 樹。
• 將 DOM 樹和 CSSOM 樹融合成渲染樹。
• 根據渲染樹來佈局，計算每個節點的幾何資訊。
• 在螢幕上繪製各個節點。

我們的演示頁面看起來也許很簡單，但也需要完成大量工作。您覺得如果修改了 DOM 或 CSSOM，會怎樣呢？我們將不得不重複上述所有步驟，以確定需要在螢幕上重新渲染的畫素。

優化關鍵渲染路徑 即儘可能地縮短上述第 1 步到第 5 步耗費的總時間。 這樣，我們可以在螢幕上儘可能快地渲染內容，還可以縮短首次渲染後螢幕重新整理之間的時間總量 - 也就是說，互動的內容可以有更高的重新整理率。