PerformanceResourceTiming:responseStatus 属性

responseStatus 只读属性表示获取资源时返回的 HTTP 响应状态代码。

此属性映射到来自 Fetch APIResponse.status

responseStatus 属性可以具有以下值

示例

检查是否命中缓存

responseStatus 属性可用于使用 304 Not Modified 响应状态代码检查缓存资源。

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

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.responseStatus === 304) {
      console.log(`${entry.name} was loaded from cache`);
    }
  });
});

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

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

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.responseStatus === 304) {
    console.log(`${entry.name} was loaded from cache`);
  }
});

或者,如果 responseStatus 不可用,您可以检查 transferSize 属性是否返回 0

跨源响应状态代码

如果 responseStatus 属性的值为 0,则资源可能是跨源请求。要允许查看跨源响应状态代码,需要设置 CORS Access-Control-Allow-Origin HTTP 响应标头。

例如,要允许 https://mdn.org.cn 查看响应状态代码,跨源资源应发送

http
Access-Control-Allow-Origin: https://mdn.org.cn

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅