請求瀑布，可視化為“瀑布圖”，是 Web 開發和效能分析中的重要工具。它說明了網頁內資源載入的順序和時間，幫助開發人員診斷效能問題並優化載入時間。讓我們深入研究請求瀑布的組件以及如何有效地閱讀和使用它。

請求瀑布的關鍵組成部分

1. 資源請求:
   
   瀑布圖中的每一行代表網頁請求的資源（例如 HTML、CSS、JavaScript、圖片、字體）。

2. 時間軸：
   
   橫軸表示時間，通常以毫秒為單位。時間軸顯示每個請求相對於初始頁面載入的開始和結束時間。

3. 請求階段:

   • DNS 尋找：將網域名稱解析為 IP 位址所需的時間。
   • TCP 連線：客戶端與伺服器之間建立 TCP 連線所需的時間。
   • TLS 握手：如果透過 HTTPS 發出請求，則完成 TLS 握手所需的時間。
   • Request Sent：向伺服器發送 HTTP 請求所花費的時間。
   • 等待（TTFB - Time to First Byte）：請求發送後等待伺服器回應所花費的時間。
   • 內容下載：收到第一個字節後下載資源所需的時間。

4. 資源種類與大小:
   
   有關資源類型（例如腳本、樣式表、圖像）及其大小（以位元組為單位）的資訊。

如何閱讀請求瀑布

1. 辨識瓶頸:
   
   尋找指示緩慢載入資源的長條。這些可以突出性能瓶頸。阻礙頁面渲染的資源（例如 CSS 和 JavaScript 檔案）對於優化尤為重要。

2. 並行與順序載入:
   
   並行載入的資源可以縮短總體載入時間。但是，某些資源可能會因為依賴關係而依序載入（例如，依賴另一個腳本的 JavaScript 檔案）。

3. 關鍵路徑:
   
   關鍵路徑由在呈現頁面之前必須載入和處理的資源組成。優化這些資源可以顯著加快頁面載入時間。

請求瀑布揭示的常見問題

1. DNS 延遲:
   
   DNS 查找時間過長會減慢初始請求的速度。解決方案包括使用更快的 DNS 提供者或快取 DNS 查詢。

2. 伺服器反應緩慢:
   
   長 TTFB 可能表示伺服器效能問題。優化伺服器配置、提高後端效能和使用內容分發網路 (CDN) 會有所幫助。

3. 海量資源：
   
   大圖像、腳本或其他資源可能會延遲頁面渲染。優化資源大小並使用延遲加載等技術可以提高效能。

4. 阻止腳本:
   
   阻止渲染的 JavaScript 檔案可能會導致延遲。延遲或非同步載入腳本可以緩解此問題。

產生請求瀑布圖的工具

• WebPageTest：一個免費的線上工具，提供詳細的瀑布圖以及其他效能指標。
• Chrome DevTools：內建於 Google Chrome 瀏覽器中，它包含一個可視化請求瀑布的「網路」標籤。
• Firefox 開發者工具：與 Chrome DevTools 類似，它包含一個用於分析請求瀑布的「網路」面板。
• GTmetrix：另一個提供全面效能報告的線上工具，包括瀑布圖。

理解和分析請求瀑布對於旨在優化網頁載入速度和使用者體驗的 Web 開發人員和效能分析師至關重要。透過識別和解決瓶頸，開發人員可以顯著提高 Web 效能並確保為使用者提供更流暢、更快的體驗。