chrome如何分析頁面加載時間

以chrome爲例，開發者模式中跟頁面加載時間相關的是network面板。

network 面板的 DOMContentLoaded和load

打開Network面板後，刷新頁面，面板底部有這三個時間：

• finish：頁面最後一個請求截止的時間，若是頁面加載完成後，觸發了ajax請求，那麼該時間會變動。
• DOMContentLoaded：dom內容加載並解析完成的時間，即頁面白屏時間
• load：頁面全部的資源（圖片、音頻、視頻等）加載完成的時間。

當頁面的初始的標記被解析完成時，會觸發DOMContentLoaded，它在Network面板上的兩個位置顯示：

• 在Overview窗格中的藍色垂直線表示這個事件。
• 在Summary窗格中，能夠查看這個事件的確切耗時。

當頁面徹底加載時觸發load事件，它顯示在三個地方：

• 在Overview窗格的紅色垂直線表示這個事件。
• 在Request Table中的紅色垂直線也表示這個事件。
• 在Summary中，能夠查看該事件的確切時間。

查看網絡時序

點擊Timing選項卡能夠查看單個資源的請求生命週期的明細分類。

• Queuing 隊列
• Stalled 停滯
• DNS lookup DNS查找
• initial connection 初始鏈接
• SSL handshake SSL握手
• Request sent 請求發送
• Waiting 等待，具體指到開始下載第一個字節的時間（TTFB：time for first byte）
• Content Download 內容下載

資源加載時序

全部網絡請求都被視爲資源，當它們經過網絡檢索時，分爲不一樣的生命週期。

一個完整請求生命週期的主要階段以下

• Redirect 重定向
  • 當即開始 startTime
  • 若是發生重定向，redirectStart也會開始計時
  • 若是重定向發生在此階段結束，那麼redirectEnd被採用
• App Cache 應用程序緩存
  • 若是瀏覽器有緩存，將採用fetchStart時間
• DNS
  • domainLookupStart 記錄DNS請求開始時間
  • domainLookupEnd記錄DNS請求結束的時間
• TCP
  • connectStart 記錄開始鏈接到服務器的時間
  • 若是用了TLS或者SSL，secureConnectionStart記錄開始鏈接時間
  • connectEnd記錄鏈接完畢時間
• Request 請求
  • requestStart記錄請求發生到服務器的時間
• Response 響應
  • responeseStart記錄最開始的響應時間
  • responseEnd記錄響應結束時間

timing面板信息詳解

• Queuing 排隊 若是一個請求排隊，則代表：
  • 請求被渲染引擎推遲，由於它比關鍵資源（如腳本/樣式）的優先級低。例如，images。
  • 這個請求被擱置，在等待一個即將被釋放的不可用的TCP socket
  • 這個請求被擱置，由於瀏覽器限制。在HTTP 1協議中，每一個源上只能有6個TCP鏈接。
  • 正在生成磁盤緩存條目（一般很是快）
• Stalled/Blocking 中止/阻塞
  • 發送請求以前的等待時間。它可能由於進入隊列的任意緣由而被阻塞。這個時間包括代理協商的時間。
• Proxy Negotiation 代理協商
  • 與代理服務器鏈接協商花費的時間
• DNS Lookup DNS查找
  • 執行DNS查找所用的時間。頁面上的每一個新域都須要完整的往返（roundtrip）才能進行DNS查找。
• Initial Connection/Connecting 初始鏈接/鏈接
  • 鏈接鏈接所需的時間，包括TCP握手/重試和協商SSL。
• SSL
  • 完成SSL握手所用的時間
• Request Sent/Sending 請求已經發送/正在發送
  • 發出網絡請求所花費的時間，一般是幾分之一毫秒
• Waiting（TTFB） 等待
  • 等待初始響應所花費的時間。這個時間包含：等待服務器傳遞響應花費的時間、捕獲到服務器發送數據的延遲時間
• Content Download/Downloading 內容下載/下載
  • 接收響應數據所花費的時間：從接收到第一個字節開始，到下載完最後一個字節結束。

Network面板診斷網絡問題

1. 排隊或者阻塞：不少個請求隊列被阻塞。這表示單個客戶端檢索的資源太多。在HTTP 1.0/1.1鏈接協議中，Chrome限制每一個域名最多執行6個TCP鏈接。

   • 解決方法：分域，即用多個字域名提供服務資源，將資源拆分到多個子域中，均勻分配。
   • HTTP2，TCP鏈接支持多路複用，消除了HTTP 1的6個鏈接限制，而且能夠經過單個鏈接同時傳輸多個資源。

2. 接收到第一個字節的時間很慢：不少綠色。

   • 解決方法：一、儘可能減小網絡鏈接。理想狀況下，在本地託管應用程序（部署在本地）。二、優化應用程序的響應速度

3. 加載緩慢：不少藍色。

   • 解決方法：減小響應的字節。例如，優化圖片。

參考：
https://www.html.cn/doc/chrome-devtools/network-performance/resource-loading/
https://www.jianshu.com/p/24b93b13e5a9