PerformanceResourceTiming: responseEnd 属性

基线广泛可用

此功能已得到充分确立，并且可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2017 年 9 月.

responseEnd 只读属性在浏览器接收资源的最后一个字节后立即或在传输连接关闭前立即返回一个 时间戳，以先发生者为准。

与许多其他 PerformanceResourceTiming 属性不同，responseEnd 属性可用于跨域请求，无需使用 Timing-Allow-Origin HTTP 响应标头。

值

在浏览器接收资源的最后一个字节后立即或在传输连接关闭前立即返回一个 DOMHighResTimeStamp，以先发生者为准。

示例

测量获取时间（不包括重定向）

responseEnd 和 fetchStart 属性可用于测量获取最终资源（不包括重定向）的总时间。如果要包含重定向，则获取的总时间在 duration 属性中提供。

const timeToFetch = entry.responseEnd - entry.fetchStart;

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});

规范

规范
资源定时 # dom-performanceresourcetiming-responseend

浏览器兼容性

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