對懸浮窗進行分析下面以一個表格的形式進行分析：在0毫秒查詢在9.31毫秒開始資源調度時間顏色時間查詢中淺灰9.31毫秒連接開始顏色時間停滯深灰4.14毫秒代理轉發深灰0.53毫秒請求/響應顏色時間請求發送深灰0.29毫秒等待中綠色20.81毫秒內容下載藍色3.48毫秒總時間：38.03毫秒 可以分為3部分，第1部分是客戶端發送請求前的準備工作，包括資源調度，代理轉發等等時間，此時是在為發送http請求做準備工作。 第2部分，也就是其中最重要的等待中時間，它代表的是從請求資源到第一個字節下載完成的時間，即獲取在接收到響應的首字節前花費的毫秒數。 第3部分，表示傳輸時間（下載第一個和最後一個字節之間的時間）。瀑佈流中各項內容意義排隊： 出現下面的情況時，瀏覽器會把當前請求放入隊列中進行排隊有更高優先級的請求時和目標服務器已經建立瞭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.「TTFB超過200ms，可以考慮對網絡進行性能優化瞭」下載：這是瀏覽器用來下載資源所用的時間。這段時間越長，說明資源越大。理想情況下，你可以通過控制資源的大小來控制這段時間的長度紫色的線紫線是開始通過腳本加載資源的一個臨界線，紫線之前，都是通過HTML文件進行加載的資源，要麼是鏈接的src，要麼是腳本的src; 而紫線之後，就成瞭通過執行HTML文件加載進來的js script，進行加載資源的操作。如何根據瀑佈圖進行性能優化瀑佈圖提供瞭三個直觀的東西來幫助我們進行前端性能優化首先，減少所有資源的加載時間。亦即減小瀑佈圖產品的寬度。瀑佈圖越窄，網站的訪問速度越快其次，減少請求數量也就是降低瀑佈圖的高度。瀑佈圖越矮越好最後，通過優化資源請求順序來加快渲染時間。從圖上看，就是將綠色的“開始渲染”線向左移。這條線向左移動得越遠越好參考鏈接：https://www.jianshu.com/p/c7e0dad634dbhttps://blog.csdn.net/carian_violet/article/details/84954360
本文出自快速备案，转载时请注明出处及相应链接。
