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

Ilya Grigorik
Ilya Grigorik

發布日期:2014 年 3 月 31 日

CSSOM 和 DOM 樹狀結構會合併為轉譯樹狀結構,然後用於計算每個可見元素的版面配置,並做為轉譯過程的輸入內容,將像素轉譯至螢幕。如要達到最佳算繪效能,請務必對每個步驟進行最佳化調整。

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

  • DOM 和 CSSOM 樹狀結構會結合成轉譯樹狀結構。
  • 轉譯樹狀圖只包含轉譯網頁所需的節點。
  • 版面配置會計算每個物件的確切位置和大小。
  • 最後一個步驟是繪製,會接收最終轉譯樹狀結構,並將像素轉譯至螢幕。

首先,瀏覽器會將 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>

試用

前述範例的 <body> 包含兩個巢狀 <div>:第一個 (父項) <div> 將節點的顯示大小設為可視區域寬度的 50%,而第二個 <div> (包含在父項中) 將其 width 設為父項的 50%,也就是可視區域寬度的 25%。

計算版面配置資訊

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

最後,我們知道哪些節點可見,以及這些節點的運算樣式和幾何圖形,因此可以將這些資訊傳遞至最終階段,將轉譯樹狀結構中的每個節點轉換為螢幕上的實際像素。這個步驟通常稱為「繪製」或「算繪」。

由於瀏覽器必須執行大量工作,這項作業可能需要一段時間。不過,Chrome 開發人員工具可提供前述三個階段的相關洞察資料。請查看原始「Hello World」範例的版面配置階段:

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

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

執行轉譯樹狀結構建構、版面配置和繪製作業所需的時間,會因文件大小、套用的樣式和執行的裝置而異:文件越大,瀏覽器的工作量就越大;樣式越複雜,繪製作業所需的時間就越長 (例如,繪製單色會比較「省時」,而繪製陰影則會比較「耗時」)。

頁面終於顯示在可視區域中:

已轉譯的 Hello World 頁面

以下是瀏覽器的快速步驟回顧:

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

雖然示範頁面看起來很簡單,但瀏覽器需要進行大量工作。如果 DOM 或 CSSOM 遭到修改,您必須重複執行這項程序,才能找出需要在螢幕上重新算繪的像素。

最佳化重要算繪路徑是指盡可能縮短執行上述步驟 1 至 5 所需的總時間。這樣一來,系統就能盡快將內容算繪至螢幕,並縮短初始算繪後的螢幕更新時間,也就是說,互動式內容的刷新率會更高。

意見回饋