發布日期:2014 年 3 月 31 日
CSSOM 和 DOM 樹狀結構會合併成一個算繪樹狀結構,並在隨後用於 計算每個可見元素的版面配置,並做為 將像素算繪到螢幕上的繪製過程。針對每個項目進行最佳化 是達成最佳轉譯效能的關鍵步驟。
在上一節中,建構物件模型時,我們建立了 DOM 建立 CSS 樹狀結構不過,這兩項工具 分別擷取文件不同面向的獨立物件 描述內容,另一個則描述需要用到的樣式規則 已套用至文件如何合併這兩者,讓瀏覽器在螢幕上算繪像素?
摘要
- DOM 和 CSSOM 樹狀結構會結合成轉譯樹狀結構。
- 轉譯樹狀結構只包含轉譯頁面所需的節點。
- Layout 會計算每個物件的確切位置和大小。
- 最後一個步驟是繪製,這會擷取最終的算繪樹狀結構,並將像素轉譯至螢幕。
首先,瀏覽器會將 DOM 和 CSSOM 合併為「轉譯樹狀結構」,擷取網頁上所有可見的 DOM 內容,以及每個節點的所有 CSSOM 樣式資訊。
瀏覽器大致會執行下列步驟,建構轉譯樹狀結構:
從 DOM 樹狀結構的根節點開始,逐一檢視每個可見節點。
- 部分節點不會顯示 (例如指令碼標記、元標記等),因為這些節點不會反映在轉譯的輸出內容中,因此會省略。
- 有些節點會使用 CSS 隱藏,並從轉譯樹狀結構中省略;舉例來說,上例中的 span 節點會從轉譯樹狀結構中省略,因為我們有明確的規則,會在該節點上設定「display: none」屬性。
針對每個可見節點,找出並套用適當的 CSSOM 規則。
以內容和計算出的樣式,發出可見的節點。
最終輸出內容是轉譯樹狀結構,其中包含畫面上所有可見內容的內容和樣式資訊。有了轉譯樹狀結構後,我們就能繼續處理「版面配置」階段。
到目前為止,我們已經計算了哪些節點應顯示及其計算樣式,但是尚未計算這些節點在裝置可視區域中的確切位置和大小,也就是「版面配置」也稱為「重排」
為了找出網頁上每個物件的確切大小和位置,瀏覽器會從轉譯樹狀結構的根節點開始,並逐一檢查。以這段程式碼為例:
<!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」的版面配置階段範例:
- 「版面配置」事件會擷取時間軸中算繪樹狀結構的建構、位置和大小。
- 版面配置完成後,瀏覽器會發出「小畫設定」和「繪製」事件,將算繪樹狀結構轉換為畫面上的像素。
執行轉譯樹狀結構建構、版面配置和繪製作業所需的時間,會因文件大小、套用的樣式和執行的裝置而異:文件越大,瀏覽器的工作量就越大;樣式越複雜,繪製作業所需的時間就越長 (例如,繪製單色會「省時」,但繪製陰影會「耗時」,因為需要計算和轉譯)。
頁面終於顯示在可視區域中:
以下是瀏覽器的快速步驟摘要:
- 處理 HTML 標記並建構 DOM 樹狀結構。
- 處理 CSS 標記並建構 CSSOM 樹狀結構。
- 將 DOM 和 CSSOM 合併為轉譯樹狀結構。
- 在轉譯樹狀結構上執行版面配置,以便計算每個節點的幾何圖形。
- 將個別節點繪製到畫面上。
示範網頁似乎很基本,但瀏覽器需要執行許多工作。如果 DOM 或 CSSOM 經過修改,您必須重複執行這項程序,才能找出需要在螢幕上重新算繪的像素。
最佳化關鍵轉譯路徑,是指將上述序列中步驟 1 至 5 執行的總時間降至最低,這樣做會盡快將內容算繪到螢幕上,同時也可縮短初始轉譯後畫面更新之間經過的時間。盡可能提高互動式內容的重新整理頻率