导航计时
导航时间 (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 参考文档中的属性页面。