使用導航正時API分析頁面負載

深入剖析網頁加載性能：Navigation Timing API詳解

核心要點

• Navigation Timing API 提供了網頁加載過程中的詳細計時信息，包括DNS查找、TCP連接建立、頁面重定向、DOM構建時間等指標。它內置於瀏覽器，不會產生額外開銷。
• 目前，Navigation Timing API 僅支持 Internet Explorer 9 、Firefox 和 Chrome。因此，在使用 API 之前應先檢測瀏覽器支持情況。該 API 在 window.performance.timing 對像中定義。
• API 記錄了頁面加載過程中眾多里程碑事件的時間戳，每個事件都作為 window.performance.timing 對象的一個屬性存儲。如果某個事件未發生，其值為零。 API 還定義了一個接口，用於確定用戶如何訪問特定頁面。
• Navigation Timing API 可與 Ajax 調用結合使用，將實際用戶數據報告回服務器。這允許開發者了解頁面在真實環境中的行為。這些數據還可以用於創建頁面加載過程的可視化圖表。

網頁加載速度是影響用戶體驗的關鍵因素之一。緩慢的加載速度會讓用戶感到沮喪並流失。然而，排查緩慢加載的原因通常並非易事，因為許多因素都會影響整體加載時間，例如用戶的瀏覽器、網絡狀況、服務器負載和應用程序代碼等等。幸運的是，Navigation Timing API 可以輕鬆地幫助我們解決這個問題。

過去，開發者收集這些方面數據的途徑十分有限。許多開發者長期以來都使用 JavaScript 的 Date 對象來收集性能數據。例如，以下代碼通過比較頁面加載事件處理程序調用後的時間戳來測量加載時間：

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

這種方法存在幾個問題：首先，JavaScript 的時間精度notoriously 不高；其次，使用Date 對象會引入開銷並使應用程序代碼混亂；第三，Date 對像只能測量代碼在瀏覽器中運行後的執行時間，無法提供關於服務器、網絡等頁面加載過程的數據。

Navigation Timing API 的登場

為了提供更準確和全面的頁面加載數據，W3C 提出了 Navigation Timing API。該 API 提供了頁面加載過程中的更詳細的計時信息。與 Date 對像不同，Navigation Timing API 可以提供與 DNS 查找、TCP 連接建立、頁面重定向、DOM 構建時間以及其他各種指標相關的測量數據。 Navigation Timing 也內置於瀏覽器，這意味著不會產生額外的開銷。

檢測瀏覽器支持

目前，Navigation Timing API 僅支持 Internet Explorer 9 、Firefox 和 Chrome。因此，在使用 API 之前應先檢測瀏覽器支持情況。該 API 在 window.performance.timing 對像中定義。以下函數檢測 API 是否受支持：

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

記錄的事件

API 記錄了頁面加載過程中眾多里程碑事件的時間戳。每個事件都作為 window.performance.timing 對象的一個屬性存儲。以下列表描述了每個事件。如果某個事件未發生（例如頁面重定向），則其值為零。 （注意：Mozilla 聲稱這些事件按此順序發生。）

• navigationStart：瀏覽器完成提示卸載先前文檔後的時間。如果沒有先前文檔，則 navigationStart 等於 fetchStart。這是用戶感知到的頁面加載時間的開始。
• fetchStart：瀏覽器開始查找 URL 之前的瞬間時間。查找過程包括檢查應用程序緩存，或者如果未緩存則向服務器請求文件。
• domainLookupStart：瀏覽器開始對 URL 進行 DNS 查找之前的瞬間時間。如果不需要 DNS 查找，則該值與 fetchStart 相同。
• domainLookupEnd：DNS 查找完成後的瞬間時間。如果不需要 DNS 查找，則該值與 fetchStart 相同。
• connectStart：瀏覽器連接到服務器之前的瞬間時間。如果 URL 是緩存的或本地資源，則該值等於 domainLookupEnd。
• connectEnd：與服務器建立連接後的瞬間時間。如果 URL 是緩存的或本地資源，則該值與 domainLookupEnd 相同。
• secureConnectionStart：如果使用 HTTPS 協議，則 secureConnectionStart 設置為安全握手開始之前的瞬間時間。如果瀏覽器不支持 HTTPS，則此值應為 undefined。
• requestStart：瀏覽器發送 URL 請求之前的瞬間時間。 API 未定義 requestEnd 值。
• redirectStart：啟動重定向的 URL 獲取的開始時間。
• redirectEnd：如果存在任何重定向，則 redirectEnd 表示接收最後一個重定向響應的最後一個字節後的時間。
• responseStart：瀏覽器接收到響應的第一個字節後的瞬間時間。
• responseEnd：瀏覽器接收到響應的最後一個字節後的瞬間時間。
• unloadEventStart：先前文檔的 unload 事件觸發之前的瞬間時間。如果沒有先前文檔，或者先前文檔來自不同的來源，則此值為零。
• unloadEventEnd：先前文檔的 unload 事件觸發後的瞬間時間。如果沒有先前文檔，或者先前文檔來自不同的來源，則此值為零。如果存在任何指向不同來源的重定向，則 unloadEventStart 和 unloadEventEnd 都為零。
• domLoading：document.readyState 值設置為“loading”之前的瞬間時間。
• domInteractive：document.readyState 值設置為“interactive”之前的瞬間時間。
• domContentLoadedEventStart：DOMContentLoaded 事件觸發之前的瞬間時間。
• domContentLoadedEventEnd：DOMContentLoaded 事件觸發後的瞬間時間。
• domComplete：document.readyState 值設置為“complete”之前的瞬間時間。
• loadEventStart：窗口的 load 事件觸發之前的瞬間時間。如果事件尚未觸發，則值為零。
• loadEventEnd：窗口的 load 事件觸發後的瞬間時間。如果事件尚未觸發或仍在運行，則值為零。

導航類型

Navigation Timing API 還定義了一個接口，用於確定用戶如何訪問特定頁面。 window.performance 對像還包含一個 navigation 對象，該對象包含兩個屬性——type 和 redirectCount。 type 屬性提供了用戶導航到當前頁面的方法。以下列表描述了 type 可以保存的值：

• 如果用戶通過鍵入 URL、單擊鏈接、提交表單或通過腳本操作來導航到頁面，則 type 的值為 0。
• 如果用戶重新加載/刷新頁面，則 type 等於 1。
• 如果用戶通過歷史記錄（後退或前進按鈕）導航到頁面，則 type 等於 2。
• 對於任何其他情況，type 等於 255。

redirectCount 屬性包含導航到當前頁面的重定向次數。如果沒有發生重定向，或者任何重定向來自不同的來源，則 redirectCount 為零。以下示例顯示瞭如何訪問導航數據：

var start = new Date();

window.addEventListener("load", function() {
  var elapsed = (new Date()).getTime() - start.getTime();
}, false);

數據解讀

Navigation Timing API 可用於計算頁面加載時間的某些組成部分。例如，執行 DNS 查找所花費的時間可以通過從 timing.domainLookupEnd 中減去 timing.domainLookupStart 來計算。以下示例計算幾個有用的指標。 “userTime”對應於用戶體驗的總頁面加載延遲。 “dns”和“connection”變量分別表示執行 DNS 查找和連接到服務器所花費的時間。 “requestTime”存儲發送到服務器並接收響應的總時間。最後，“fetchTime”存儲完成文檔獲取的總時間（包括訪問任何緩存等）。請注意，setTimeout() 函數是在窗口加載事件處理程序中調用的。這確保了在加載事件完成後的瞬間才使用導航計時數據。如果從加載事件處理程序訪問計時數據，則 timing.loadEventEnd 的值將為零。

function supportsNavigationTiming() {
  return !!(window.performance && window.performance.timing);
}

Navigation Timing API 可與 Ajax 調用結合使用，將實際用戶數據報告回服務器。這很有用，因為它允許開發者了解頁面在真實環境中的行為。這些數據還可以用於創建頁面加載過程的可視化圖表。事實上，Google Analytics 已經將其報告中納入了導航計時數據。

需要記住的要點

• JavaScript 的 Date 對象無法準確測量頁面加載數據，因為它不知道在瀏覽器中運行之前的請求。
• Navigation Timing API 內置於瀏覽器，並提供更詳細的計時測量。
• 該 API 還跟踪用戶如何導航到頁面。
• 導航計時數據可以發送到服務器進行分析。

(此處可以添加關於 Navigation Timing API 的常見問題解答 FAQ 部分，內容可根據需要從原文檔中提取並進行改寫)

以上是使用導航正時API分析頁面負載的詳細內容。更多資訊請關注PHP中文網其他相關文章！