上圖為瀏覽器某接口的信息,我們平常都是看headers、response標簽頁,現在我們看timing標簽頁,這里可以分析一個請求所需要的時間,頁面加載所需要的時間,我把這些信息整理出來方便以后查看,分析瀏覽器行為,提升前端代碼性能:
Queueing請求排隊的時間。關於這個,需要知道一個背景,就是瀏覽器與同一個域名建立的TCP連接數是有限制的,chrome設置的6個,如果說同一時間,發起的同一域名的請求超過了6個,這時候就需要排隊了,也就是這個Queueing時間
Stalled是瀏覽器得到要發出這個請求的指令,到請求可以發出的等待時間,一般是代理協商、以及等待可復用的TCP連接釋放的時間,不包括DNS查詢、建立TCP連接等時間等
DNS Lookup DNS查詢的時間,頁面內任何新的域名都需要走一遍 完整的DNS查詢過程,已經查詢過的則走緩存
Initial Connection / Connecting 建立TCP連接的時間,包括TCP的三次握手和SSL的認證
SSL完成ssl認證的時間
Request sent/sending請求第一個字節發出前到最后一個字節發出后的時間,也就是上傳時間
Waiting 請求發出后,到收到響應的第一個字節所花費的時間(Time To First Byte)
Content Download 收到響應的第一個字節,到接受完最后一個字節的時間,就是下載時間