如何使用“PerformanceNavigationTiming” API 获取页面加载时间？

我正在尝试使用PerformanceNavigationTiming API https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming生成页面加载指标。

上面链接的 MDN API 文档说PerformanceEntry.duration应该给我我需要的东西，因为它：

[r]返回一个时间戳，该时间戳是 PerformanceNavigationTiming.loadEventEnd 和 PerformanceEntry.startTime 属性之间的差异。

然而，当我检查这个属性时，我得到的只是0。我正在从运行的 React hook 中访问此 APIuseEffect等待的函数windowload 事件，然后检查 api，如下所示：

export const useReportPageLoadTime = () => {
  useEffect(() => {
    const reportTime = () => {
      let navPerformance: PerformanceEntry
      navPerformance = window.performance.getEntriesByType('navigation')[0]

      console.log({
        duration: navPerformance.duration,
        blob: navPerformance.toJSON()
      })
    }

    if (document.readyState === 'complete') {
      reportTime()
      return null
    } else {
      window.addEventListener('load', reportTime)
      return () => window.removeEventListener('load', reportTime)
    }
  }, [])
}

正如你所看到的，我也打电话toJSON在性能条目上，实际上它表明了所依据的价值观duration (startTime and loadEventEnd）都是0还有：

有谁知道为什么我会得到这个值？

我终于能够使用与事件侦听器不同的方法来使其工作。从逻辑上讲，当load事件触发，但我获取数据的唯一方法是使用 Performance API 的另一个功能：PerformanceObserver，当有新数据可用时会触发回调。

这是对我有用的代码：

export const useReportPageLoadMetrics = () => {
  useEffect(() => {
    const perfObserver = new PerformanceObserver((observedEntries) => {
      const entry: PerformanceEntry =
        observedEntries.getEntriesByType('navigation')[0]
      console.log('pageload time: ', entry.duration)
    })

    perfObserver.observe({
      type: 'navigation',
      buffered: true
    })
  }, [])
}