前端性能與可靠性工程系列: 渲染、緩存與關鍵路徑優化

---

第一部分：揭秘瀏覽器 - 關鍵渲染路徑 (CRP)

關鍵渲染路徑 (Critical Rendering Path - CRP) 是指瀏覽器從接收到最初的 HTML、CSS 和 JavaScript 字節，到最終將它們渲染成可見像素所必須經過的一系列步驟。我們的目標，就是讓這個系列步驟走得盡可能的快、盡可能的順暢。

這個過程就像一個精密的工廠流水線：

1. 處理 HTML → 構建 DOM (文檔對象模型)
   瀏覽器接收到 HTML 響應后，會逐行解析，并構建出一個樹狀結構，即 DOM (Document Object Model)。這棵樹代表了頁面的所有內容和結構。

2. 處理 CSS → 構建 CSSOM (CSS 對象模型)
   當解析器遇到 CSS（無論是 <link> 標簽、<style> 標簽還是內聯樣式），它會開始構建另一棵樹狀結構，即 CSSOM (CSS Object Model)。這棵樹包含了頁面上所有節點的樣式信息。

3. 組合 DOM 與 CSSOM → 構建渲染樹 (Render Tree)
   瀏覽器會將 DOM 和 CSSOM 合并起來，生成渲染樹 (Render Tree)。這棵樹只包含那些需要被渲染的節點（例如，display: none; 的節點就不會出現在渲染樹中）以及它們的樣式。

4. 布局 (Layout / Reflow)
   有了渲染樹，瀏覽器就開始計算每個節點在屏幕上的確切位置