關鍵渲染路徑是指瀏覽器從接收到 HTML 文件開始，直至將內容渲染到屏幕上所經歷的一系列步驟。

理解並優化關鍵渲染路徑可以顯著提升網頁性能和用戶體驗。

以下是關鍵渲染路徑的主要步驟：

1. 解析 HTML：
   • 瀏覽器接收到 HTML 文件後，開始解析並構建 DOM 樹（Document Object Model）。
2. 解析 CSS：
   • 當瀏覽器遇到 CSS 文件或 <style> 標籤時，會暫停解析 HTML，去下載並解析 CSS，構建 CSSOM 樹（CSS Object Model）。
3. JavaScript 解析與執行：
   • 當瀏覽器遇到 JavaScript 文件或 <script> 標籤時，如果這些腳本不帶有 async 或 defer 屬性，會暫停解析 HTML 並執行腳本，這可能會改變 DOM 或 CSSOM 樹。
4. 構建渲染樹：
   • 瀏覽器將 DOM 和 CSSOM 樹結合，構建渲染樹。渲染樹包含了每個將顯示在屏幕上的可見元素。
5. 佈局（Layout）：
   • 瀏覽器計算每個渲染樹節點的大小和位置，生成佈局（也稱為回流）。
6. 繪製（Painting）：
   • 瀏覽器將渲染樹節點繪製到屏幕上，這一步稱為繪製或塗層合成。

優化關鍵渲染路徑的方法

1. 減少阻塞資源的數量和大小：
   • 合併和最小化 CSS 和 JavaScript 文件，減少 HTTP 請求數量和文件大小。
2. 異步加載資源：
   • 將非關鍵 JavaScript 標記為 async 或 defer，確保它們不會阻塞 HTML 解析。
3. 內聯關鍵 CSS：
   • 將關鍵 CSS 直接內聯到 HTML 文件中，確保頁面快速渲染。
4. 使用瀏覽器快取：
   • 利用瀏覽器快取機制，減少重複下載相同資源的次數。