瀏覽器根據HTML中外連資源出現的順序，依次放入隊列（隊列），然后根據優先級確定向服務器獲取資源的順序。同優先級的資源根據HTML中出現的先后順序來向服務器獲取資源。
瀑布中各項內容的含義：
- 排隊： 出現下面的情況時，瀏覽器會把當前請求放入隊列中進行排隊
- 有更高優先級的請求時
- 和目標服務器已經建立了6個TCP鏈接（最多6個，適用於HTTP / 1.0和HTTP / 1.1）
- 瀏覽器正在硬盤緩存上簡單的分配空間
- 停滯： 請求會因為上面的任一個原因而阻塞
- DNS查詢：瀏覽器正在解析IP地址，在瀏覽器和服務器進行通信之前，必須經過DNS查詢，將域名轉換成IP地址。在這個階段，你可以處理的東西很少。但幸運的是，並非所有的請求都需要經過這一階段
- 代理協商：瀏覽器正在與代理服務器協商請求
- 要求已發送：請求已發送
- ServiceWorker准備：瀏覽器正在啟動服務器
- 請求ServiceWorker：請求正在被發送到服務器
- 等待（TTFB）：瀏覽器等待響應第一個字節到達的時間。包含來回的延遲時間和服務器准備響應的時間
- 內容下載：瀏覽器正在接收響應信息
- 接收推送：瀏覽器正在通過HTTP / 2服務器推送接收此響應的數據
- 閱讀推。：瀏覽器正在讀取以前接收到的本地數據
- 初始連接：在瀏覽器發送請求之前，必須建立TCP連接。這個過程僅僅發生在瀑布圖中的開頭幾行，否則這就是個性能問題
- SSL / TLS協商：如果你的頁面是通過SSL / TLS這類安全協議加載資源，這段時間就是瀏覽器建立安全連接的過程。目前谷歌將HTTPS作為其搜索排名因素之一，SSL / TLS協商的使用變得越來越普遍了
- 時間到第一個字節（TTFB）： TTFB是瀏覽器請求發送到服務器的時間+服務器處理請求時間+響應報文的第一字節到達瀏覽器的時間。我們用這個指標來判斷你的網絡服務器是否性能不夠，或者說你是否需要使用CDN
- 下載：這是瀏覽器用來下載資源所用的時間。這段時間越長，說明資源越大。理想情況下，你可以通過控制資源的大小來控制這段時間的長度
瀑布中的顏色：
顯然，瀑中有好幾種顏色：淺灰，深灰，橙色，綠色，藍色結合上面的解釋，大概知道這些顏色代表的含義了：
- 淺灰：查詢中
- 深灰：停滯，代理轉發，請求發送
- 橙色：初始連接
- 綠色：等待中
- 藍色：內容下載
除了這些橫向的柱狀圖外，還有一條縱向的紫色的線
紫線是開始通過腳本加載資源的一個臨界線，紫線之前，都是通過HTML文件進行加載的資源，要么是鏈接的SRC，要么是腳本的SRC;而紫線之后，就成了通過執行HTML文件加載進來的js script，進行加載資源的操作。這條線對於前端工程師至關重要，能夠幫助他們進行前端性能優化分析。
如何根據瀑布圖進行性能優化
瀑布圖提供了三個直觀的東西來幫助我們進行前端性能優化
- 首先，減少所有資源的加載時間。亦即減小瀑布圖產品的寬度。瀑布圖越窄，網站的訪問速度越快
- 其次，減少請求數量也就是降低瀑布圖的高度。瀑布圖越矮越好
- 最后，通過優化資源請求順序來加快渲染時間。從圖上看，就是將綠色的“開始渲染”線向左移。這條線向左移動的越遠越好
原文: https://blog.csdn.net/carian_violet/article/details/84954360