發布日期：2014 年 3 月 31 日
瀏覽器必須先建構 DOM 和 CSSOM 樹狀結構，才能轉譯網頁。因此，我們必須確保能以最快的速度將 HTML 和 CSS 提供給瀏覽器。
摘要
- 位元組 → 字元 → 符記 → 節點 → 物件模型。
- HTML 標記會轉換為文件物件模型 (DOM)；CSS 標記會轉換為 CSS 物件模型 (CSSOM)。
- DOM 和 CSSOM 是獨立的資料結構。
- Chrome 開發人員工具效能面板可用來擷取及檢查 DOM 和 CSSOM 的建構和處理成本。
文件物件模型 (DOM)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
請從最簡單的情況開始：純 HTML 網頁，其中包含一些文字和單一圖片。瀏覽器如何處理這個網頁？
- 轉換：瀏覽器會從磁碟或網路讀取 HTML 的原始位元組，然後根據檔案的指定編碼 (例如 UTF-8) 將其轉換為個別字元。
- 符記化：瀏覽器會將字元字串轉換為不同的符記 (如 W3C HTML5 標準所指定，例如
<html>、<body>)，以及其他尖括號內的字串。每個符記都有特殊含義和一組規則。 - Lexing：產生的符記會轉換為「物件」，定義其屬性和規則。
- DOM 建構：最後，由於 HTML 標記定義了不同標記之間的關係 (部分標記包含在其他標記中)，因此建立的物件會在樹狀資料結構中連結，同時擷取原始標記中定義的父項/子項關係：HTML 物件是 body 物件的父項，body 是 paragraph 物件的父項，直到整個文件的表示法建構完成為止。
這整個程序的最終輸出內容是簡易頁面的文件物件模型 (DOM)，讓瀏覽器用於進一步處理頁面。
瀏覽器每次處理 HTML 標記時，都會執行先前定義的所有步驟：將位元組轉換為字元、識別符記、將符記轉換為節點，以及建構 DOM 樹狀結構。整個程序可能需要一些時間，尤其是當我們需要處理大量 HTML 時。
如果您開啟 Chrome 開發人員工具，並在網頁載入時記錄時間軸，就能看到執行此步驟所需的實際時間。在前述範例中，將一段 HTML 轉換為 DOM 樹狀結構所需的時間約為 5 毫秒。如果是較大的網頁，這項程序可能需要更長的時間。在建立流暢的動畫時，如果瀏覽器必須處理大量 HTML，這可能會成為瓶頸。
DOM 樹狀結構會擷取文件標記的屬性和關係，但不會指出元素算繪後的外觀。這就是 CSSOM 的職責。
CSS 物件模型 (CSSOM)
在瀏覽器建構基本網頁的 DOM 時，遇到文件 <head> 中參照外部 CSS 樣式表單 style.css 的 <link> 元素。系統預測需要此資源才能轉譯網頁，因此會立即調度此資源的要求，並傳回以下內容：
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
雖然我們可以直接在 HTML 標記中宣告樣式 (內嵌)，但如果維持 CSS 與 HTML 各自獨立，我們可以將內容和設計視為分開處理：設計人員可以專心處理 CSS、開發人員可以專注於 HTML 和其他疑慮。
就像 HTML 一樣，我們需要將收到的 CSS 規則轉換為瀏覽器可理解及使用的內容。因此，我們會重複 HTML 程序，但針對 CSS 而非 HTML：
CSS 位元組會轉換為字元、符記和節點，最後連結成稱為「CSS 物件模型」(CSSOM) 的樹狀結構：
CSSOM 為什麼採用樹狀結構？在為網頁上的任何物件計算最終樣式組合時，瀏覽器會從適用於該節點的最一般規則開始 (例如，如果該節點是 body 元素的子項，則會套用所有 body 樣式)，然後透過套用更明確的規則遞迴式精進已計算的樣式，也就是「依序套用」規則。
為讓您更清楚瞭解這項功能，請參考先前所述的 CSSOM 樹狀結構。放置在 body 元素內的 <span> 標記中，任何包含的文字都會顯示 16 像素的字型大小，並以紅色顯示文字。font-size 指示詞會從 body 向下依序連結至 span。不過，如果 span 是段落 (p) 標記的子項，則不會顯示其內容。
另請注意，上述樹狀結構並非完整的 CSSOM 樹狀結構，只會顯示我們在樣式表中決定覆寫的樣式。每個瀏覽器都會提供一組預設樣式，也稱為「使用者代理程式樣式」。如果我們未提供任何樣式，瀏覽器就會顯示這些樣式，而我們的樣式會覆寫這些預設樣式。
如要瞭解 CSS 處理作業所需的時間，您可以在 DevTools 中記錄時間軸，然後尋找「Recalculate Style」事件：與 DOM 剖析不同，時間軸不會顯示個別的「Parse CSS」項目，而是擷取剖析和 CSSOM 樹狀結構的資訊，並在單一事件下對計算樣式進行遞迴計算。
我們的瑣碎樣式表格需要約 0.6 毫秒的處理時間，並影響頁面上的八個元素，雖然影響不大，但仍會造成效能損失。不過，這八個元素的來源為何？CSSOM 和 DOM 是獨立的資料結構！原來是瀏覽器隱藏了重要的步驟。接下來，我們將介紹轉譯樹狀結構，將 DOM 和 CSSOM 連結在一起。