PerformanceResourceTiming: workerStart 属性

Baseline 已广泛支持

此功能已非常成熟，可在许多设备和浏览器版本上运行。自 2018 年 1 月起，它已在所有浏览器中可用。

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

workerStart 是 PerformanceResourceTiming 接口的一个只读属性，它返回一个 DOMHighResTimeStamp。该时间戳表示在 Service Worker 线程已运行时，在分派 FetchEvent 之前立即；或者在 Service Worker 线程尚未运行时，在启动 Service Worker 线程之前立即。如果资源未被 Service Worker 拦截，则该属性始终返回 0。

值

workerStart 属性可能具有以下值：

一个 DOMHighResTimeStamp。
如果未使用 Service Worker，则为 0。
如果资源是跨域请求且未使用 Timing-Allow-Origin HTTP 响应头，则返回 0。

示例

测量 ServiceWorker 处理时间

workerStart 和 fetchStart 属性可用于测量 ServiceWorker 的处理时间。

const workerProcessingTime = entry.fetchStart - entry.workerStart;

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const workerProcessingTime = entry.fetchStart - entry.workerStart;
    if (workerProcessingTime > 0) {
      console.log(
        `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
      );
    }
  });
});

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

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

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const workerProcessingTime = entry.fetchStart - entry.workerStart;
  if (workerProcessingTime > 0) {
    console.log(
      `${entry.name}: Worker processing time: ${workerProcessingTime}ms`,
    );
  }
});