Resource Timing API All In One

Resource Timing API All In One

Resource Timing API 使开发人员可以详细了解特定页面的资源是如何加载的。
尽管该 API 的名称如此，但它提供的信息不局限于计时数据（虽然有大量该数据）。

您可以访问的其他数据包括：

initiatorType：资源的获取方式：例如从 <script> 或 <link> 标签，或者通过 fetch() 获取
nextHopProtocol：用于获取资源的协议，例如 h2 或 quic
encodedBodySize/decodedBodySize：资源的编码或解码形式的大小（分别列出）
transferSize：实际通过网络传输的资源的大小。当资源通过缓存实现时，该值可能比 encodedBodySize 小得多，在某些情况下还可能为零（如果不需要缓存重验证）。

请注意，您可以使用资源计时条目的 transferSize 属性来测量缓存命中率指标，甚至可以测量总缓存资源大小指标，在了解您的资源缓存策略对重复访问者的性能有何影响时，这些指标可能很有用。

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

demo

// 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(entry.name, entry.transferSize === 0);
    }
  });
  // Start listening for `resource` entries to be dispatched.
  po.observe({type: 'resource', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

refs

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

---

---

©xgqfrms 2012-2020

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

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

---