Navigation Timing API All In One

Navigation Timing API All In One

Navigation Timing API 类似于 Resource Timing API，但它只报告导航请求。
navigation 条目类型也类似于 resource 条目类型，但它包含一些仅特定于导航请求的附加信息（例如 DOMContentLoaded 和 load 事件何时触发）。

被许多开发人员跟踪以了解服务器响应时间 (Time to First Byte) 的一个指标可通过 Navigation Timing API 获得 - 具体来说，是条目的 responseStart 时间戳。

https://developer.mozilla.org/en-US/docs/Web/API/Navigation_Timing_API

demo

navigation

// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      // If transferSize is 0, the resource was fulfilled via the cache.
      console.log('Time to first byte', entry.responseStart);
    }
  });
  // Start listening for `navigation` entries to be dispatched.
  po.observe({type: 'navigation', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

使用服务工作进程的开发人员可能关心的另一个指标是导航请求的服务工作进程启动时间。这是浏览器在可以开始拦截 fetch 事件之前启动服务工作进程所花费的时间。

特定导航请求的服务工作进程启动时间可以通过 entry.responseStart 和 entry.workerStart 之间的增量时间来确定。

// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
  // Create the performance observer.
  const po = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log('Service Worker startup time:',
          entry.responseStart - entry.workerStart);
    }
  });
  // Start listening for `navigation` entries to be dispatched.
  po.observe({type: 'navigation', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

refs

https://web.dev/custom-metrics/#navigation-timing-api

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---