Navigation Timing獲取頁面加載各個階段所需時間

原文連接

原由

最近接觸到了一個性能優化方面爲咱們提供精準數據的工具，Navigation Timing，本想從網上獲取他更詳細的信息，但搜索到的內容絕大部分都是國外的文章，遂決定寫一遍具體分析的文章。

以前測試頁面加載的時間都是在相應的位置打Date.now()，經過計算時間差來實現。這樣的作法有不少弊端。

• 須要在許多地方添加額外的代碼

• 記錄的時間不許確

• 測試完以後須要找到每個地方註釋or刪除，容易落下且麻煩

W3C Web Performance Working Group 引入了 Navigation Timing API 幫咱們自動，精準的實現了性能測試的打點問題。

Navigation Timing API 用法

用法很簡單，在頁面load完以後咱們能夠從performance.timing對象中拿到咱們須要的全部數據。見下圖：

Navigation Timing不只幫咱們省去了繁瑣的手動打點的操做，並且提供了之前咱們沒法獲取到的數據，好比DNS和TCP鏈接所需的時間。

裏面提供的具體事件以下圖：

參數說明

具體文字說明：

• navigationStart
  加載起始時間

• redirectStart
  重定向開始時間（若是發生了HTTP重定向，每次重定向都和當前文檔同域的話，就返回開始重定向的fetchStart的值。其餘狀況，則返回0）

• redirectEnd
  重定向結束時間（若是發生了HTTP重定向，每次重定向都和當前文檔同域的話，就返回最後一次重定向接受完數據的時間。其餘狀況則返回0）

• fetchStart
  瀏覽器發起資源請求時，若是有緩存，則返回讀取緩存的開始時間

• domainLookupStart
  查詢DNS的開始時間。若是請求沒有發起DNS請求，如keep-alive，緩存等，則返回fetchStart

• domainLookupEnd
  查詢DNS的結束時間。若是沒有發起DNS請求，同上

• connectStart
  開始創建TCP請求的時間。若是請求是keep-alive，緩存等，則返回domainLookupEnd

• (secureConnectionStart)
  若是在進行TLS或SSL，則返回握手時間

• connectEnd
  完成TCP連接的時間。若是是keep-alive，緩存等，同connectStart

• requestStart
  發起請求的時間

• responseStart
  服務器開始響應的時間

• domLoading
  從圖中看是開始渲染dom的時間，具體未知

• domInteractive
  未知

• domContentLoadedEventStart
  開始觸發DomContentLoadedEvent事件的時間

• domContentLoadedEventEnd
  DomContentLoadedEvent事件結束的時間

• domComplete
  從圖中看是dom渲染完成時間，具體未知

• loadEventStart
  觸發load的時間，如沒有則返回0

• loadEventEnd
  load事件執行完的時間，如沒有則返回0

• unloadEventStart
  unload事件觸發的時間

• unloadEventEnd
  unload事件執行完的時間

注，從domLoading開始往下的參數chrome官網並未給出具體英文解釋，只是猜想，若有錯誤，歡迎糾正。

附上官方連接

簡單用法

這些參數已經很是詳細，也很精準，稍做處理就能夠得出咱們須要的一些關鍵數字，如：

• DNS解析時間： domainLookupEnd - domainLookupStart

• TCP創建鏈接時間： connectEnd - connectStart

• 白屏時間： responseStart - navigationStart

• dom渲染完成時間： domContentLoadedEventEnd - navigationStart

• 頁面onload時間： loadEventEnd - navigationStart

demo以下：

let timing = performance.timing,
     start = timing.navigationStart,
     dnsTime = 0,
     tcpTime = 0,
     firstPaintTime = 0,
     domRenderTime = 0,
     loadTime = 0;

dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析時間:', dnsTime , '\nTCP創建時間:', tcpTime, '\n首屏時間:', firstPaintTime,
 '\ndom渲染完成時間:', domRenderTime, '\n頁面onload時間:', loadTime);

效果以下：

兼容性

目前Navigation Timing已經普及，絕大部分主流瀏覽器都已經支持

那麼，開始優化你的app吧

---

3Fuyu