導航計時
導航時間 (Navigation Timing) 是 Performance API 的一部分，它提供與頁面導航相關的指標。例如，你可以確定載入或解除安裝文件所需的時間，或者記錄直到 DOM 構建完成並可以與 DOM 互動所需的時間。
它僅包含當前文件，因此通常只有一個 PerformanceNavigationTiming 物件可供觀察。它透過將 entryType 設定為 "navigation" 來擴充套件 PerformanceEntry 介面，並且還繼承自 PerformanceResourceTiming，因此，文件獲取過程中的所有時間戳也都可用。
導航時間戳
圖 1. 導航時間戳 (來源)。
文件導航時間戳（除了 資源時間 中的時間戳外）是：
startTime：始終為 0。unloadEventStart：（如果存在前一個文件）當前文件的unload事件處理程式開始之前的那個時間戳。unloadEventEnd：（如果存在前一個文件）當前文件的unload事件處理程式完成之後的那個時間戳。domInteractive：DOM 構建完成且 JavaScript 可以與之互動的時間戳。domContentLoadedEventStart：當前文件的DOMContentLoaded事件處理程式開始之前的那個時間戳。domContentLoadedEventEnd：當前文件的DOMContentLoaded事件處理程式完成之後的那個時間戳。domComplete：文件和所有子資源載入完成的時間戳。loadEventStart：當前文件的load事件處理程式開始之前的那個時間戳。loadEventEnd：當前文件的load事件處理程式完成之後的那個時間戳。
其他屬性
PerformanceNavigationTiming 介面提供了額外的屬性，例如返回重定向次數的 redirectCount，以及指示導航型別的 type。
示例
domContentLoadedEventEnd 和 domContentLoadedEventStart 時間戳可用於衡量處理 DOMContentLoaded 事件處理程式所需的時間。
此示例使用 PerformanceObserver，當導航效能條目在瀏覽器效能時間線上被記錄時，它會通知呼叫者。該示例使用 buffered 選項來訪問在建立觀察者之前已記錄的條目。
js
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const domContentLoadedTime =
entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
console.log(
`${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
);
});
});
observer.observe({ type: "navigation", buffered: true });
有關更多示例，請參閱 PerformanceNavigationTiming 參考文件中的屬性頁面。