【前端】Chrome DevTools 筆記

1. 查看網絡耗時 timeline

生命週期按照如下類別顯示花費的時間：

• Queuing
• Stalled
• 若是適用：DNS lookup、initial connection、SSL handshake
• Request sent
• Waiting (TTFB)
• Content Download

詳細解釋：

• Queuing

  若是某個請求正在排隊，則指示：
  請求已被渲染引擎推遲，由於該請求的優先級被視爲低於關鍵資源（例如腳本/樣式）的優先級。 圖像常常發生這種狀況。
  請求已被暫停，以等待將要釋放的不可用 TCP 套接字。
  請求已被暫停，由於在 HTTP 1 上，瀏覽器僅容許每一個源擁有六個 TCP 鏈接。
  生成磁盤緩存條目所用的時間（一般很是迅速）

• Stalled/Blocking

  請求等待發送所用的時間。 能夠是等待 Queueing 中介紹的任何一個緣由。 此外，此時間包含代理協商所用的任什麼時候間。

• Proxy Negotiation

  與代理服務器鏈接協商所用的時間。

• DNS Lookup

  執行 DNS 查詢所用的時間。 頁面上的每個新域都須要完整的往返才能執行 DNS 查詢。

• Initial Connection / Connecting

  創建鏈接所用的時間，包括 TCP 握手/重試和協商 SSL 的時間。

• SSL

  完成 SSL 握手所用的時間。

• Request Sent / Sending

  發出網絡請求所用的時間。 一般不到一毫秒。

• Waiting (TTFB)

  等待初始響應所用的時間，也稱爲至第一字節的時間。 此時間將捕捉到服務器往返的延遲時間，以及等待服務器傳送響應所用的時間。

• Content Download / Downloading

  接收響應數據所用的時間。