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

Ilya Grigorik
Ilya Grigorik
X 首頁

發布日期：2014 年 3 月 31 日

CSSOM 和 DOM 樹狀結構會合併成一個算繪樹狀結構，並在隨後用於 計算每個可見元素的版面配置，並做為 將像素算繪到螢幕上的繪製過程。針對每個項目進行最佳化 是達成最佳轉譯效能的關鍵步驟。

在上一節中，建構物件模型時，我們建立了 DOM 建立 CSS 樹狀結構不過，這兩項工具 分別擷取文件不同面向的獨立物件 描述內容，另一個則描述需要用到的樣式規則 已套用至文件如何合併這兩者，讓瀏覽器在螢幕上算繪像素？

摘要

  • 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>

試用

上述範例的 <body> 包含兩個巢狀 <div>：第一個 (父項) <div> 會將節點的顯示大小設為可視區域寬度的 50%，第二個 <div> (由父項) 則將其 width 設為其父項的 50%。也就是可視區域寬度的 25%

計算版面配置資訊

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

最後，我們已知道哪些節點可供查看，以及這些節點的計算樣式和幾何圖形，現在可以將這項資訊傳遞至最終階段，進而將算繪樹狀結構中的每個節點，轉換成螢幕上的實際像素。這個步驟通常稱為「繪圖」或「轉點陣」。

這是因為瀏覽器需要執行大量作業，因此可能需要一些時間。不過，Chrome 開發人員工具可提供前述三個階段的相關洞察資料。檢查原始「Hello World」的版面配置階段範例：

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

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

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

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

已轉譯的 Hello World 頁面

以下是瀏覽器的快速步驟摘要：

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

示範網頁似乎很基本，但瀏覽器需要執行許多工作。如果 DOM 或 CSSOM 經過修改，您必須重複執行這項程序，才能找出需要在螢幕上重新算繪的像素。

最佳化關鍵轉譯路徑，是指將上述序列中步驟 1 至 5 執行的總時間降至最低，這樣做會盡快將內容算繪到螢幕上，同時也可縮短初始轉譯後畫面更新之間經過的時間。盡可能提高互動式內容的重新整理頻率

意見回饋