PerformanceResourceTiming: transferSize 属性

Baseline 已广泛支持

此功能已成熟，并可在许多设备和浏览器版本上运行。自 2023 年 3 月以来，它已在各种浏览器中可用。

注意：此功能在 Web Workers 中可用。

transferSize 只读属性表示已获取资源的 (以八位字节为单位的) 大小。此大小包括响应头字段以及响应载荷主体 (由 RFC7230 定义)。

如果资源是从本地缓存获取的，或者它是跨域资源，则此属性将返回零。

值

transferSize 属性可能具有以下值

一个数字，表示已获取资源的 (以八位字节为单位的) 大小。此大小包括响应头字段以及响应载荷主体 (RFC7230)。
如果资源是从缓存中即时检索的，则为 0。
如果资源是跨域请求且未使用 Timing-Allow-Origin HTTP 响应头，则返回 0。

示例

检查缓存是否命中

对于不支持 responseStatus 属性的环境，可以使用 transferSize 属性来确定缓存命中。如果 transferSize 为零，并且资源具有非零的已解码主体大小 (意味着资源是同域的或具有 Timing-Allow-Origin)，则该资源是从本地缓存获取的。

使用 PerformanceObserver 的示例，它会在浏览器性能时间线中记录新的 resource 性能条目时通知。使用 buffered 选项可以访问观察者创建之前的条目。

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

使用 Performance.getEntriesByType() 的示例，它只显示在调用此方法时浏览器性能时间线中存在的 resource 性能条目

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.transferSize === 0 && entry.decodedBodySize > 0) {
    console.log(`${entry.name} was loaded from cache`);
  }
});