PerformanceResourceTiming: requestStart 属性

基线 广泛可用

此功能已经非常成熟，并在许多设备和浏览器版本中正常运行。它自 2017 年 9 月.

报告反馈

requestStart 只读属性返回浏览器开始从服务器、缓存或本地资源请求资源之前的 时间戳。如果传输连接失败并且浏览器重试请求，返回的值将是重试请求的开始时间。

值

requestStart 没有结束属性。要衡量请求时间，请计算 responseStart - requestStart（参见下面的示例）。

  • requestStart 属性可以具有以下值
  • 一个表示浏览器开始从服务器请求资源之前的时间的 DOMHighResTimeStamp。
  • 如果资源是立即从缓存中检索的，则为 0。

示例

如果资源是跨域请求，并且没有使用 Timing-Allow-Origin HTTP 响应头，则为 0。

衡量请求时间

requestStart 和 responseStart 属性可用于衡量请求需要多长时间。
const request = entry.responseStart - entry.requestStart;

js

requestStart 和 responseStart 属性可用于衡量请求需要多长时间。
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const request = entry.responseStart - entry.requestStart;
    if (request > 0) {
      console.log(`${entry.name}: Request time: ${request}ms`);
    }
  });
});

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

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

requestStart 和 responseStart 属性可用于衡量请求需要多长时间。
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const request = entry.responseStart - entry.requestStart;
  if (request > 0) {
    console.log(`${entry.name}: Request time: ${request}ms`);
  }
});

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

跨域时序信息

如果 requestStart 属性的值为 0，则该资源可能是跨域请求。要查看跨域时序信息，需要设置 Timing-Allow-Origin HTTP 响应头。

例如，要允许 https://mdn.org.cn 查看时序资源，跨域资源应发送
Timing-Allow-Origin: https://mdn.org.cn

规范

http
规范
# 资源时序

浏览器兼容性

dom-performanceresourcetiming-requeststart

另请参阅