本文中Performance API指的是Navigation Timing API。這并不是一篇Navigation Timing API的介紹文章，而是我在使用中遇到的問題。

我在開發(fā)中遇到Navigation Timing API中的connectStart等時間節(jié)點并不是標準時間戳，而是0或者一個很小的數(shù)值，導致指標數(shù)據(jù)計算出錯，尤其是IOS設備。原因如下:

IOS設備通過瀏覽器的前進后退按鈕進入的頁面，Navigation Timing API數(shù)據(jù)中connectStart，responseEnd等數(shù)據(jù)可能為0或者是一個比較小的數(shù)值，并不是對應時間點的時間戳。究其原因，IOS設備通過緩存讀取頁面時，Navigation Timing的計算與安卓實現(xiàn)不一致。

如果你還想了解下Navigation Timing API，可以繼續(xù)往下看

Navigation Timing API

Navigation Timing API中包含全部的頁面加載中關鍵節(jié)點的時間，例如navigationStart，connectEnd，responseEnd等時間。
具體的相關API可以去MDN查看，
瀏覽器支持程度也非常不錯，移動端IOS9及以上，Android4及以上都支持，桌面端IE9也都支持。

一些常規(guī)的性能數(shù)據(jù)計算方法

DNS時間 = domainLookupEnd - domainLookupStart
TCP時間 = connectEnd - connectStart
后端時間 = responseEnd - connectEnd

白屏時間 = domInteractive - navigationStart
整屏時間 = loadEventEnd - navigationStart

解析dom樹耗時 = domComplete - domInteractive
request請求耗時 = responseEnd - responseStart

我們團隊就是按照如上指標來做的各個時間的統(tǒng)計，做了各種測試，線下數(shù)據(jù)都沒什么問題。上線了以后拿到的首批數(shù)據(jù)中，后端時間計算出來竟然有負值，尤其在IOS設備下，苦苦尋找原因，終于發(fā)現(xiàn)問題所在。

IOS設備通過瀏覽器的前進后退按鈕進入的頁面，Navigation Timing API數(shù)據(jù)中connectStart，responseEnd等數(shù)據(jù)可能為0或者是一個比較小的數(shù)值，并不是對應時間點的時間戳。

關于首屏時間的定義

根據(jù)Navigation Timing API的時間，是沒有辦法計算首屏時間的，首屏時間也并沒有嚴格的定義，我們團隊采用的首屏時間如下

首屏時間 = （dom解析完畢 && 所有首屏圖片加載完畢 ）- navigationStart

標準

屬性含義

navigationStart	準備加載新頁面的起始時間
redirectStart	如果發(fā)生了HTTP重定向，并且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回開始重定向的timing.fetchStart的值。其他情況，則返回0
redirectEnd	如果發(fā)生了HTTP重定向，并且從導航開始，中間的每次重定向，都和當前文檔同域的話，就返回最后一次重定向，接收到最后一個字節(jié)數(shù)據(jù)后的那個時間.其他情況則返回0
fetchStart	如果一個新的資源獲取被發(fā)起，則 fetchStart必須返回用戶代理開始檢查其相關緩存的那個時間，其他情況則返回開始獲取該資源的時間
domainLookupStart	返回用戶代理對當前文檔所屬域進行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache,甚至是本地資源等。 那么就返回 fetchStart的值
domainLookupEnd	返回用戶代理對結束對當前文檔所屬域進行DNS查詢的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache，甚至是本地資源等。那么就返回 fetchStart的值
connectStart	返回用戶代理向服務器服務器請求文檔，開始建立連接的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
(secureConnectionStart)	可選特性。用戶代理如果沒有對應的東東，就要把這個設置為undefined。如果有這個東東，并且是HTTPS協(xié)議，那么就要返回開始SSL握手的那個時間。 如果不是HTTPS， 那么就返回0
connectEnd	返回用戶代理向服務器服務器請求文檔，建立連接成功后的那個時間，如果此連接是一個長連接，又或者直接從緩存中獲取資源（即沒有與服務器建立連接）。則返回domainLookupEnd的值
requestStart	返回從服務器、緩存、本地資源等，開始請求文檔的時間
responseStart	返回用戶代理從服務器、緩存、本地資源中，接收到第一個字節(jié)數(shù)據(jù)的時間
responseEnd	返回用戶代理接收到最后一個字符的時間，和當前連接被關閉的時間中，更早的那個。同樣，文檔可能來自服務器、緩存、或本地資源
domLoading	返回用戶代理把其文檔的 "current document readiness" 設置為 "loading"的時候
domInteractive	返回用戶代理把其文檔的 "current document readiness" 設置為 "interactive"的時候.
domContentLoadedEventStart	返回文檔發(fā)生 DOMContentLoaded事件的時間
domContentLoadedEventEnd	文檔的DOMContentLoaded 事件的結束時間
domComplete	返回用戶代理把其文檔的 "current document readiness" 設置為 "complete"的時候
loadEventStart	文檔觸發(fā)load事件的時間。如果load事件沒有觸發(fā)，那么該接口就返回0
loadEventEnd	文檔觸發(fā)load事件結束后的時間。如果load事件沒有觸發(fā)，那么該接口就返回0

《新程序員》：云原生和全面數(shù)字化實踐50位技術專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的记录使用Performance API遇到的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。