本文中Performance API指的是Navigation Timing API。這並不是一篇Navigation Timing API的介紹文章，而是我在使用中遇到的問題。
我在開發中遇到Navigation Timing API中的connectStart等時間節點並不是標準時間戳，而是0或者一個很小的數值，導致指標資料計算出錯，尤其是IOS裝置。原因如下:
IOS裝置通過瀏覽器的前進後退按鈕進入的頁面，Navigation Timing API資料中connectStart，responseEnd等資料可能為0或者是一個比較小的數值，並不是對應時間點的時間戳。究其原因，IOS裝置通過快取讀取頁面時，Navigation Timing的計算與安卓實現不一致。
如果你還想了解下Navigation Timing API，可以繼續往下看
Navigation Timing API
Navigation Timing API中包含全部的頁面載入中關鍵節點的時間，例如navigationStart，connectEnd，responseEnd等時間。
具體的相關API可以去MDN檢視，
瀏覽器支援程度也非常不錯，移動端IOS9及以上，Android4及以上都支援，桌面端IE9也都支援。
一些常規的效能資料計算方法
DNS時間 = domainLookupEnd - domainLookupStart
TCP時間 = connectEnd - connectStart
後端時間 = responseEnd - connectEnd
白屏時間 = domInteractive - navigationStart
整屏時間 = loadEventEnd - navigationStart
解析dom樹耗時 = domComplete - domInteractive
request請求耗時 = responseEnd - responseStart
我們團隊就是按照如上指標來做的各個時間的統計，做了各種測試，線下資料都沒什麼問題。上線了以後拿到的首批資料中，後端時間計算出來竟然有負值，尤其在IOS裝置下，苦苦尋找原因，終於發現問題所在。
IOS裝置通過瀏覽器的前進後退按鈕進入的頁面，Navigation Timing API資料中connectStart，responseEnd等資料可能為0或者是一個比較小的數值，並不是對應時間點的時間戳。
關於首屏時間的定義
根據Navigation Timing API的時間，是沒有辦法計算首屏時間的，首屏時間也並沒有嚴格的定義，我們團隊採用的首屏時間如下
首屏時間 = （dom解析完畢 && 所有首屏圖片載入完畢 ）- navigationStart
標準
| 屬性 | 含義 |
|---|---|
| navigationStart | 準備載入新頁面的起始時間 |
| redirectStart | 如果發生了HTTP重定向，並且從導航開始，中間的每次重定向，都和當前文件同域的話，就返回開始重定向的timing.fetchStart的值。其他情況，則返回0 |
| redirectEnd | 如果發生了HTTP重定向，並且從導航開始，中間的每次重定向，都和當前文件同域的話，就返回最後一次重定向，接收到最後一個位元組資料後的那個時間.其他情況則返回0 |
| fetchStart | 如果一個新的資源獲取被髮起，則 fetchStart必須返回使用者代理開始檢查其相關快取的那個時間，其他情況則返回開始獲取該資源的時間 |
| domainLookupStart | 返回使用者代理對當前文件所屬域進行DNS查詢開始的時間。如果此請求沒有DNS查詢過程，如長連線，資源cache,甚至是本地資源等。 那麼就返回 fetchStart的值 |
| domainLookupEnd | 返回使用者代理對結束對當前文件所屬域進行DNS查詢的時間。如果此請求沒有DNS查詢過程，如長連線，資源cache，甚至是本地資源等。那麼就返回 fetchStart的值 |
| connectStart | 返回使用者代理向伺服器伺服器請求文件，開始建立連線的那個時間，如果此連線是一個長連線，又或者直接從快取中獲取資源（即沒有與伺服器建立連線）。則返回domainLookupEnd的值 |
| (secureConnectionStart) | 可選特性。使用者代理如果沒有對應的東東，就要把這個設定為undefined。如果有這個東東，並且是HTTPS協議，那麼就要返回開始SSL握手的那個時間。 如果不是HTTPS， 那麼就返回0 |
| connectEnd | 返回使用者代理向伺服器伺服器請求文件，建立連線成功後的那個時間，如果此連線是一個長連線，又或者直接從快取中獲取資源（即沒有與伺服器建立連線）。則返回domainLookupEnd的值 |
| requestStart | 返回從伺服器、快取、本地資源等，開始請求文件的時間 |
| responseStart | 返回使用者代理從伺服器、快取、本地資源中，接收到第一個位元組資料的時間 |
| responseEnd | 返回使用者代理接收到最後一個字元的時間，和當前連線被關閉的時間中，更早的那個。同樣，文件可能來自伺服器、快取、或本地資源 |
| domLoading | 返回使用者代理把其文件的 "current document readiness" 設定為 "loading"的時候 |
| domInteractive | 返回使用者代理把其文件的 "current document readiness" 設定為 "interactive"的時候. |
| domContentLoadedEventStart | 返回文件發生 DOMContentLoaded事件的時間 |
| domContentLoadedEventEnd | 文件的DOMContentLoaded 事件的結束時間 |
| domComplete | 返回使用者代理把其文件的 "current document readiness" 設定為 "complete"的時候 |
| loadEventStart | 文件觸發load事件的時間。如果load事件沒有觸發，那麼該介面就返回0 |
| loadEventEnd | 文件觸發load事件結束後的時間。如果load事件沒有觸發，那麼該介面就返回0 |