轉譯樹狀結構建構、版面配置和繪製

Ilya Grigorik
Ilya Grigorik

CSSOM 和 DOM 樹狀結構會合併為轉譯樹狀結構,用於計算每個可見元素的版面配置,並做為繪製程序的輸入內容,將像素算繪至螢幕。最佳化這些步驟對於達到最佳轉譯效能至關重要。

在上一節中,我們探討物件模型的建構方式,並根據輸入的 HTML 和 CSS 來建構了 DOM 和 CSSOM 樹狀結構。然而,這兩者都是獨立的物件,可擷取文件的不同層面:一個描述內容,另一個則是說明需要套用至文件的樣式規則。如何合併兩者,並讓瀏覽器在螢幕上顯示像素?

摘要

  • DOM 和 CSSOM 樹狀結構會合併,形成算繪樹狀結構。
  • 轉譯樹狀結構只包含轉譯網頁所需的節點。
  • Layout 會計算每個物件的確切位置和大小。
  • 最後一個步驟是繪製,這會擷取最終的轉譯樹狀結構,並將像素算繪到螢幕上。

首先,瀏覽器會將 DOM 和 CSSOM 結合成「轉譯樹狀結構」,藉此擷取網頁上所有可見的 DOM 內容,以及每個節點的所有 CSSOM 樣式資訊。

系統會結合 DOM 和 CSSOM 來建立算繪樹狀結構

如要建構轉譯樹狀結構,瀏覽器大致會執行下列操作:

  1. 從 DOM 樹狀結構的根層級開始週遊每個可見節點。

    • 有些節點不會顯示 (例如指令碼標記、中繼標記等);由於這些節點不會反映在轉譯後的輸出內容中,因此系統會省略這些節點。
    • 部分節點已透過 CSS 隱藏,而且轉譯樹狀結構中也會省略部分節點;舉例來說,在上述範例中,Span 節點 (在上例中-) 就沒有,因為我們有明確規則設定了「display: none」屬性。
  2. 針對各個可見節點,找出並套用相符的 CSSOM 規則。

  3. 以內容及其計算樣式發出可見節點。

最終輸出結果是轉譯樹狀結構,其中包含所有可見內容的內容和樣式資訊。建構轉譯樹狀結構後,我們就能進入「版面配置」階段。

到目前為止,我們已經計算哪些節點應可見及計算樣式,但尚未計算它們在裝置可視區域中的確切位置和大小,這就是「版面配置」階段 (又稱為「重排」)。

為得知網頁上每個物件的確切大小和位置,瀏覽器會在轉譯樹狀結構的根層級開始週遊。讓我們來看看一個簡單的實作範例:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

試用

以上頁面的主體包含兩個巢狀 div:第一個 (父項) div 將節點的顯示大小設為可視區域寬度的 50%,第二個 div (包含父項) - 將其寬度設為其父項的 50% (也就是可視區域寬度的 25%)。

正在計算版面配置資訊

版面配置程序的輸出內容是「方塊模型」,它會精確地擷取可視區域中每個元素的確切位置和大小:所有相對測量值會轉換成螢幕上的絕對像素。

最後,我們已瞭解有哪些節點會顯示,以及這些節點的運算樣式和幾何圖形,就可以將這項資訊傳遞至最後階段,進而將轉譯樹狀結構中的每個節點轉換為螢幕上的實際像素。這個步驟通常稱為「繪畫」或「光柵化」。

瀏覽器需要做很多工作,因此需要一段時間。不過,Chrome 開發人員工具能夠協助您深入瞭解上述三個階段。現在,讓我們看看原始「Hello World」範例的版面配置階段:

在開發人員工具中測量版面配置

  • 「Layout」事件會擷取時間軸中的轉譯樹狀結構、位置和大小計算結果。
  • 版面配置完成後,瀏覽器會發出「繪製設定」和「繪製」事件,將轉譯樹狀結構轉換為畫面上的像素。

執行算繪樹狀結構所需的時間、版面配置和繪製作業所需的時間取決於文件大小、套用的樣式,以及執行時所用的裝置:文件越大,瀏覽器的工作工作就越豐富;樣式越複雜,繪製所需時間也越長 (例如,單色的色彩在計算及轉譯時「成本低廉」,投射陰影「成本高」)。

網頁最終會顯示在可視區域中:

轉譯的 Hello World 頁面

瀏覽器的操作步驟摘要如下:

  1. 處理 HTML 標記並建立 DOM 樹狀結構。
  2. 處理 CSS 標記並建立 CSSOM 樹狀結構。
  3. 將 DOM 和 CSSOM 結合為算繪樹狀結構。
  4. 在轉譯樹狀結構上執行版面配置,計算每個節點的幾何圖形。
  5. 在螢幕上繪製個別節點。

我們的示範網頁看起來很簡單,但需要多工處理。如果您修改了 DOM 或 CSSOM,則必須重複這個程序,才能找出需要重新顯示在畫面上的像素。

最佳化關鍵轉譯路徑是指將上述序列中步驟 1 到 5 花費的總時間降至最低的程序。這樣一來,系統就能盡快將內容轉譯至螢幕上,並在初始轉譯後減少畫面更新之間的時間,也就是提高互動式內容的刷新率。

意見回饋: