记录使用Performance API遇到的问题
本文中Performance API指的是Navigation Timing API。這并不是一篇Navigation Timing API的介紹文章，而是我在使用中遇到的問題。
我在開發(fā)中遇到Navigation Timing API中的connectStart等時間節(jié)點并不是標準時間戳，而是0或者一個很小的數(shù)值，導(dǎo)致指標數(shù)據(jù)計算出錯，尤其是IOS設(shè)備。原因如下:
IOS設(shè)備通過瀏覽器的前進后退按鈕進入的頁面，Navigation Timing API數(shù)據(jù)中connectStart，responseEnd等數(shù)據(jù)可能為0或者是一個比較小的數(shù)值，并不是對應(yīng)時間點的時間戳。究其原因，IOS設(shè)備通過緩存讀取頁面時，Navigation Timing的計算與安卓實現(xiàn)不一致。
如果你還想了解下Navigation Timing API，可以繼續(xù)往下看
Navigation Timing API
Navigation Timing API中包含全部的頁面加載中關(guān)鍵節(jié)點的時間，例如navigationStart，connectEnd，responseEnd等時間。
具體的相關(guān)API可以去MDN查看，
瀏覽器支持程度也非常不錯，移動端IOS9及以上，Android4及以上都支持，桌面端IE9也都支持。
一些常規(guī)的性能數(shù)據(jù)計算方法
DNS時間 = domainLookupEnd - domainLookupStart
TCP時間 = connectEnd - connectStart
后端時間 = responseEnd - connectEnd
白屏?xí)r間 = domInteractive - navigationStart
整屏?xí)r間 = loadEventEnd - navigationStart
解析dom樹耗時 = domComplete - domInteractive
request請求耗時 = responseEnd - responseStart
我們團隊就是按照如上指標來做的各個時間的統(tǒng)計，做了各種測試，線下數(shù)據(jù)都沒什么問題。上線了以后拿到的首批數(shù)據(jù)中，后端時間計算出來竟然有負值，尤其在IOS設(shè)備下，苦苦尋找原因，終于發(fā)現(xiàn)問題所在。
IOS設(shè)備通過瀏覽器的前進后退按鈕進入的頁面，Navigation Timing API數(shù)據(jù)中connectStart，responseEnd等數(shù)據(jù)可能為0或者是一個比較小的數(shù)值，并不是對應(yīng)時間點的時間戳。
關(guān)于首屏?xí)r間的定義
根據(jù)Navigation Timing API的時間，是沒有辦法計算首屏?xí)r間的，首屏?xí)r間也并沒有嚴格的定義，我們團隊采用的首屏?xí)r間如下
首屏?xí)r間 = （dom解析完畢 && 所有首屏圖片加載完畢 ）- navigationStart
標準
| navigationStart | 準備加載新頁面的起始時間 |
| 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)前文檔所屬域進行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連接，資源cache,甚至是本地資源等。 那么就返回 fetchStart的值 |
| domainLookupEnd | 返回用戶代理對結(jié)束對當(dāng)前文檔所屬域進行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 |
總結(jié)
以上是生活随笔為你收集整理的记录使用Performance API遇到的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OpenStack云计算口袋书－第一章－
- 下一篇： 中国式领导