导航计时

导航计时是性能 API 的一部分，提供了与从一个页面导航到另一个页面相关的指标。例如，您可以确定加载或卸载文档需要多长时间，或者记录 DOM 构建完成并可以与 DOM 进行交互所花费的时间。DOM

只包括当前文档，因此通常只有一个 PerformanceNavigationTiming 对象可供观察。它扩展了 PerformanceEntry 接口，其中 entryType 为 "navigation"，并且也继承自 PerformanceResourceTiming，因此从获取文档的过程中获得的所有时间戳也都可用。

PerformanceEntry PerformanceResourceTiming PerformanceNavigationTiming

时间戳图，按记录顺序列出获取文档的时间戳 图 1. 导航时间戳 (来源).

除了来自 资源计时 的时间戳之外，文档导航时间戳还包括：

  1. startTime: 始终为 0。
  2. unloadEventStart: (如果存在前一个文档) 当前文档的 unload 事件处理程序开始之前的立即时间戳。
  3. unloadEventEnd: (如果存在前一个文档) 当前文档的 unload 事件处理程序完成之后的立即时间戳。
  4. domInteractive: DOM 构建完成并可以从 JavaScript 与其进行交互的时间戳。
  5. domContentLoadedEventStart: 当前文档的 DOMContentLoaded 事件处理程序开始之前的立即时间戳。
  6. domContentLoadedEventEnd: 当前文档的 DOMContentLoaded 事件处理程序完成之后的立即时间戳。
  7. domComplete: 文档和所有子资源完成加载的时间戳。
  8. loadEventStart: 当前文档的 load 事件处理程序开始之前的立即时间戳。
  9. loadEventEnd: 当前文档的 load 事件处理程序完成之后的立即时间戳。

其他属性

PerformanceNavigationTiming 接口提供其他属性，例如 redirectCount 返回重定向次数，以及 type 指示导航类型。

示例

domContentLoadedEventEnd 和 domContentLoadedEventStart 时间戳可用于衡量处理 DOMContentLoaded 事件处理程序需要多长时间。

此示例使用 PerformanceObserver，它会在浏览器性能时间线上记录新的 navigation 性能条目时通知调用方。此示例使用 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 参考文档中的属性页面。

另请参阅