使用簡潔的 Navigation Timing API 測試網頁載入速度（不完全譯文）
轉載地址：http://www.cnblogs.com/mrsunny/archive/2012/09/04/2670727.html
我們總希望網頁載入的快一點。谷歌實驗顯示短如100毫秒的延遲就會對使用者體驗造成不好的影響。那麼我們如何來測量網頁載入速度？"page load"的真實含義又是什麼？
Navigation Timing 是一個可以在web中精確測量效能的javascript API。這個API提供了一個簡單的方法來獲得頁面導航、載入事件的精確而又詳細的時間狀態。目前在 IE9、Chrome、Firefox nightly builds 中可用。
這篇文章描述了 Navigation API 並展示瞭如何使用API匯出時間資料。
使用方法：
在Chrome中開啟控制檯，在命令列中輸入performance，點開並檢視它的timing屬性，你會看到如下程式碼：
如果在IE中使用，需要使用<!doctype html>文件宣告，瀏覽器需要在標準模式下。
各屬性代表的意義：
每一個performance.timing屬性都表示一個頁面事件（例如頁面傳送了請求）或者頁面載入（例如當DOM開始載入），測量以毫秒的形式從1970年1月1日的午夜開始。結果為0表示該事件未發生（例如redirectEnd或者redirectStart等）。
這些事件所代表的含義在Microsoft's performance.timing documentation
這裡有一張從 Navigation Timing draft 弄來的 performance.timing 事件的順序圖：
當load/unload動作被觸發時，也可能是提示關閉當前文件時（即回車鍵在url位址列中按下，頁面被再次重新整理，submit按鈕被點選）。如果當前視窗中沒有前一個文件，那麼navigationStart的值就是
它可能是頁面重定向時的開始時間（如果存在重定向的話）或者是0。
unloadEventStart：
如果被請求的文件來自於前一個同源（同源策略）的文件，那麼該屬性儲存的是瀏覽器開始解除安裝前一個文件的時刻。否則的話（前一個文件非同源或者沒有前一個文件），為0。
unloadEventEnd：
表示同源的前一個文件解除安裝完成的時刻。如果前一個文件不存在或者非同源，則為0。
如果存在重定向的話，redirectEnd表示最後一次重定向後伺服器端response的資料被接收完畢的時間。否則的話就是0。
fetchStart是指在瀏覽器發起任何請求之前的時間值。在fetchStart和domainLookupStart之間，瀏覽器會檢查當前文件的快取。
這個屬性是指當瀏覽器開始檢查當前域名的DNS之前的那一時刻。如果因為任何原因沒有去檢查DNS（即瀏覽器使用了快取，持久連線，或者本地資源），那麼它的值等同於fetchStart。
指瀏覽器完成DNS檢查時的時間。如果DNS沒有被檢查，那麼它的值等同於fetchStart。
當瀏覽器開始於伺服器連線時的時間。如果資源取自快取（或者伺服器由於其他任何原因沒有建立連線，例如持久連線），那麼它的值等同於domainLookupEnd。
當瀏覽器端完成與伺服器端建立連線的時刻。如果沒有建立連線它的值等同於domainLookupEnd。
可選。如果頁面使用HTTPS，它的值是安全連線握手之前的時刻。如果該屬性不可用，則返回undefined。如果該屬性可用，但沒有使用HTTPS，則返回0。
指客戶端收到從伺服器端（或快取、本地資源）響應回的第一個位元組的資料的時刻。
指客戶端收到從伺服器端（或快取、本地資源）響應回的最後一個位元組的資料的時刻。
指document物件建立完成的時刻。
指文件解析完成的時刻，包括在“傳統模式”下被阻塞的通過script標籤載入的內容（除了使用defer或者async屬性非同步載入的情況）。
當DOMContentLoaded事件觸發之前，瀏覽器完成所有script（包括設定了defer屬性但未設定async屬性的script）的下載和解析之後的時刻。
當DOMContentLoaded事件完成之後的時刻。它也是javascript類庫中DOMready事件觸發的時刻。
如果已經沒有任何延遲載入的事件（所有圖片的載入）阻止load事件發生，那麼該時刻將會將document.readyState屬性設定為"complete"，此時刻就是domComplete。
該屬性返回的是load事件剛剛發生的時刻，如果load事件還沒有發生，則返回0。
該屬性返回load事件完成之後的時刻。如果load事件未發生，則返回0。
檢測使用者通過哪種方式來到此頁面：
我們有幾種方式來開啟一個頁面，例如，在位址列輸入url，重新整理當前頁面，通過history的前進後退。這時候 performance.navigation 就派上用場了。這個 API 有兩個屬性：
- redirectCount：頁面請求被重定向的次數
- type：頁面被載入的方式。
以下列舉了 type 屬性的三種取值情況：
- 0：使用者通過點選連結或者在瀏覽器位址列輸入URL的方式進入頁面。
- 1：頁面過載。
- 2：通過瀏覽器history的前進或後退進入頁面。
eg： 你通過的方式進入頁面。
實時頁面效能測試：
通過 Navigation Timing API ，我們可以精確實時的獲取真實使用者的在實際網路環境中的頁面載入速度，而不是僅僅在開發環境、公司網路中測試頁面載入速度。
頁面效能統計：
我們甚至可以使用 XHR 將使用者每次瀏覽網頁時的 performance.timing 資料傳送到伺服器端。這種方式是實時的，不過效率比較低。或者，可以使用本地儲存的方式將使用者頁面效能的資料儲存在本地並週期性的打包傳送到伺服器端進行分析。通過這種方式，navigation timing API 實現了一種簡單的提供頁面效能歷史資料的方法。
附錄：
1. 2012.03.01: Kasia 寫了一個非常不錯資料視覺化的書籤。
參考：