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

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

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

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

Navigation Timing API

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

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

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

白屏?xí)r間 = domInteractive - navigationStart
整屏?xí)r間 = loadEventEnd - navigationStart

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

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

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

關(guān)于首屏?xí)r間的定義

根據(jù)Navigation Timing API的時間，是沒有辦法計(jì)算首屏?xí)r間的，首屏?xí)r間也并沒有嚴(yán)格的定義，我們團(tuán)隊(duì)采用的首屏?xí)r間如下

首屏?xí)r間 = （dom解析完畢 && 所有首屏圖片加載完畢 ）- navigationStart

標(biāo)準(zhǔn)

屬性含義

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

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

總結(jié)

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

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