PerformanceResourceTiming：transferSize 属性

基线 2023

新可用

自 2023 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在较旧的设备或浏览器中使用。

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`);
  }
});

跨源内容大小信息

如果transferSize 属性的值为0 且未从本地缓存加载，则该资源可能是跨源请求。要公开跨源内容大小信息，需要设置 Timing-Allow-Origin HTTP 响应头。

例如，要允许https://mdn.org.cn 查看内容大小，跨源资源应发送

http

Timing-Allow-Origin: https://mdn.org.cn

规范

规范
资源计时 # dom-performanceresourcetiming-transfersize

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

Timing-Allow-Origin