關鍵渲染路徑 (Critical Rendering Path) 指的是瀏覽器從接收 HTML、CSS 和 JavaScript 到首次渲染頁面內容到螢幕上的完整流程。最佳化關鍵渲染路徑可以縮短首次渲染時間，提升使用者體驗，特別是對於首屏載入速度至關重要。
我理解的關鍵渲染路徑包含以下幾個關鍵步驟：
-
構建 DOM 樹 (DOM Construction): 瀏覽器解析 HTML 文件，將其轉換為一個樹形結構，即 DOM 樹。每個 HTML 標籤都會成為 DOM 樹中的一個節點。
-
構建 CSSOM 樹 (CSSOM Construction): 瀏覽器解析 CSS 樣式表，將其轉換為 CSS 物件模型樹 (CSSOM)。CSSOM 樹包含了頁面中所有樣式規則及其應用的元素。
-
構建渲染樹 (Render Tree Construction): 瀏覽器將 DOM 樹和 CSSOM 樹合併，生成渲染樹。渲染樹只包含需要渲染的節點及其樣式資訊，忽略了像
<head>、display: none的元素。 -
佈局 (Layout): 瀏覽器計算渲染樹中每個節點的大小和位置，確定它們在視口中的佈局。這一步也稱為“重排”或“迴流”。
-
繪製 (Paint): 瀏覽器將渲染樹中的每個節點繪製到螢幕上，包括文字、顏色、影像、邊框等。
最佳化關鍵渲染路徑的核心目標是儘可能縮短構建 DOM 樹、CSSOM 樹和渲染樹的時間，以及減少佈局和繪製的次數。 以下是一些常用的最佳化策略：
- 減少關鍵資源的數量: 關鍵資源指的是阻塞渲染的資源，包括 HTML、CSS 和 JavaScript。減少這些資源的數量可以加快下載和解析速度。
- 最佳化關鍵資源的大小: 壓縮 HTML、CSS 和 JavaScript 檔案可以減少下載時間。
- 最佳化關鍵資源的載入順序: CSS 應該儘早載入，以避免渲染阻塞。JavaScript 應該儘可能延遲載入，或者使用
async或defer屬性非同步載入，以避免阻塞 HTML 解析。 - 使用媒體查詢最佳化 CSS: 避免在 CSS 中使用過多的複雜選擇器，並使用媒體查詢將不同裝置的樣式分開，以減少 CSSOM 樹的構建時間。
- 避免使用阻塞渲染的 JavaScript: 避免在 JavaScript 中操作 DOM 或 CSSOM，因為這會導致重新佈局和重新繪製，影響渲染效能。
- 使用快取: 利用瀏覽器快取可以減少資源的重複下載，加快頁面載入速度。
- 使用服務端渲染 (SSR): 服務端渲染可以在伺服器端生成 HTML 內容，減少瀏覽器的工作量，加快首屏渲染速度。
理解和最佳化關鍵渲染路徑對於提升 Web 效能至關重要。透過減少關鍵資源的數量和大小，最佳化資源載入順序，以及避免阻塞渲染的操作，可以顯著提升頁面的載入速度和使用者體驗。