2.2.1 timing API

2.2.1 timing API

timing的總體結構以下圖所示：

各字段的含義以下：

• startTime：有些瀏覽器實現爲navigationStart，表明瀏覽器開始unload前一個頁面文檔的開始時間節點。好比咱們當前正在瀏覽baidu.com，在地址欄輸入google.com並回車，瀏覽器的執行動做依次爲：unload當前文檔（即baidu.com）->請求下一文檔（即google.com）。navigationStart的值即是觸發unload當前文檔的時間節點。

  若是當前文檔爲空，則navigationStart的值等於fetchStart。

• redirectStart和redirectEnd：若是頁面是由redirect而來，則redirectStart和redirectEnd分別表明redirect開始和結束的時間節點；
• unloadEventStart和unloadEventEnd：若是前一個文檔和請求的文檔是同一個域的，則unloadEventStart和unloadEventEnd分別表明瀏覽器unload前一個文檔的開始和結束時間節點。不然二者都等於0；
• fetchStart是指在瀏覽器發起任何請求以前的時間值。在fetchStart和domainLookupStart之間，瀏覽器會檢查當前文檔的緩存；
• domainLookupStart和domainLookupEnd分別表明DNS查詢的開始和結束時間節點。若是瀏覽器沒有進行DNS查詢（好比使用了cache），則二者的值都等於fetchStart；
• connectStart和connectEnd分別表明TCP創建鏈接和鏈接成功的時間節點。若是瀏覽器沒有進行TCP鏈接（好比使用持久化鏈接webscoket），則二者都等於domainLookupEnd；
• secureConnectionStart：可選。若是頁面使用HTTPS，它的值是安全鏈接握手以前的時刻。若是該屬性不可用，則返回undefined。若是該屬性可用，但沒有使用HTTPS，則返回0；
• requestStart表明瀏覽器發起請求的時間節點，請求的方式能夠是請求服務器、緩存、本地資源等；
• responseStart和responseEnd分別表明瀏覽器收到從服務器端（或緩存、本地資源）響應回的第一個字節和最後一個字節數據的時刻；
• domLoading表明瀏覽器開始解析html文檔的時間節點。咱們知道IE瀏覽器下的document有readyState屬性，domLoading的值就等於readyState改變爲loading的時間節點；
• domInteractive表明瀏覽器解析html文檔的狀態爲interactive時的時間節點。domInteractive並不是DOMReady，它早於DOMReady觸發，表明html文檔解析完畢（即dom tree建立完成）可是內嵌資源（好比外鏈css、js等）還未加載的時間點；

• domContentLoadedEventStart：表明DOMContentLoaded事件觸發的時間節點：

  頁面文檔徹底加載並解析完畢以後,會觸發DOMContentLoaded事件，HTML文檔不會等待樣式文件,圖片文件,子框架頁面的加載(load事件能夠用來檢測HTML頁面是否徹底加載完畢(fully-loaded))。

• domContentLoadedEventEnd：表明DOMContentLoaded事件完成的時間節點，此刻用戶能夠對頁面進行操做，也就是jQuery中的domready時間；
• domComplete：html文檔徹底解析完畢的時間節點；

• loadEventStart和loadEventEnd分別表明onload事件觸發和結束的時間節點

2.2.2 計算性能指標

可使用Navigation.timing 統計到的時間數據來計算一些頁面性能指標，好比DNS查詢耗時、白屏時間、domready等等。以下：

• DNS查詢耗時 = domainLookupEnd - domainLookupStart
• TCP連接耗時 = connectEnd - connectStart
• request請求耗時 = responseEnd - responseStart
• 解析dom樹耗時 = domComplete - domInteractive
• 白屏時間 = domloadng - fetchStart
• domready時間 = domContentLoadedEventEnd - fetchStart
• onload時間 = loadEventEnd - fetchStart

2.2.3 Resource timing API

Resource timing API是用來統計靜態資源相關的時間信息，詳細的內容請參考W3C Resource timing。這裏咱們只介紹performance.getEntries方法，它能夠獲取頁面中每一個靜態資源的請求，以下：

能夠看到performance.getEntries返回一個數組，數組的每一個元素表明對應的靜態資源的信息，好比上圖展現的第一個元素對應的資源類型initiatorType是圖片img，請求花費的時間就是duration的值。

關於Resource timing API的使用場景，感興趣的同窗能夠深刻研究。