深入剖析網(wǎng)頁加載性能：Navigation Timing API詳解

核心要點

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

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

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

var start = new Date();

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

這種方法存在幾個問題：首先，JavaScript 的時間精度 notoriously 不高；其次，使用 Date 對象會引入開銷并使應(yīng)用程序代碼混亂；第三，Date 對象只能測量代碼在瀏覽器中運行后的執(zhí)行時間，無法提供關(guān)于服務(wù)器、網(wǎng)絡(luò)等頁面加載過程的數(shù)據(jù)。

Navigation Timing API 的登場

為了提供更準(zhǔn)確和全面的頁面加載數(shù)據(jù)，W3C 提出了 Navigation Timing API。該 API 提供了頁面加載過程中的更詳細的計時信息。與 Date 對象不同，Navigation Timing API 可以提供與 DNS 查找、TCP 連接建立、頁面重定向、DOM 構(gòu)建時間以及其他各種指標(biāo)相關(guān)的測量數(shù)據(jù)。Navigation Timing 也內(nèi)置于瀏覽器，這意味著不會產(chǎn)生額外的開銷。

檢測瀏覽器支持

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

var start = new Date();

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

記錄的事件

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

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

導(dǎo)航類型

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

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

redirectCount 屬性包含導(dǎo)航到當(dāng)前頁面的重定向次數(shù)。如果沒有發(fā)生重定向，或者任何重定向來自不同的來源，則 redirectCount 為零。以下示例顯示了如何訪問導(dǎo)航數(shù)據(jù)：

var start = new Date();

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

數(shù)據(jù)解讀

Navigation Timing API 可用于計算頁面加載時間的某些組成部分。例如，執(zhí)行 DNS 查找所花費的時間可以通過從 timing.domainLookupEnd 中減去 timing.domainLookupStart 來計算。以下示例計算幾個有用的指標(biāo)?！皍serTime”對應(yīng)于用戶體驗的總頁面加載延遲?！癲ns”和“connection”變量分別表示執(zhí)行 DNS 查找和連接到服務(wù)器所花費的時間?！皉equestTime”存儲發(fā)送到服務(wù)器并接收響應(yīng)的總時間。最后，“fetchTime”存儲完成文檔獲取的總時間（包括訪問任何緩存等）。請注意，setTimeout() 函數(shù)是在窗口加載事件處理程序中調(diào)用的。這確保了在加載事件完成后的瞬間才使用導(dǎo)航計時數(shù)據(jù)。如果從加載事件處理程序訪問計時數(shù)據(jù)，則 timing.loadEventEnd 的值將為零。

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

Navigation Timing API 可與 Ajax 調(diào)用結(jié)合使用，將實際用戶數(shù)據(jù)報告回服務(wù)器。這很有用，因為它允許開發(fā)者了解頁面在真實環(huán)境中的行為。這些數(shù)據(jù)還可以用于創(chuàng)建頁面加載過程的可視化圖表。事實上，Google Analytics 已經(jīng)將其報告中納入了導(dǎo)航計時數(shù)據(jù)。

需要記住的要點

• JavaScript 的 Date 對象無法準(zhǔn)確測量頁面加載數(shù)據(jù)，因為它不知道在瀏覽器中運行之前的請求。
• Navigation Timing API 內(nèi)置于瀏覽器，并提供更詳細的計時測量。
• 該 API 還跟蹤用戶如何導(dǎo)航到頁面。
• 導(dǎo)航計時數(shù)據(jù)可以發(fā)送到服務(wù)器進行分析。

(此處可以添加關(guān)于 Navigation Timing API 的常見問題解答 FAQ 部分，內(nèi)容可根據(jù)需要從原文檔中提取并進行改寫)

以上是使用導(dǎo)航正時API分析頁面負載的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！