PerformanceResourceTiming: свойство workerStart

Чтение-только свойство workerStart интерфейса PerformanceResourceTiming возвращает значение DOMHighResTimeStamp непосредственно перед отправкой FetchEvent, если поток Service Worker уже запущен, или непосредственно перед запуском потока Service Worker, если он еще не запущен. Если ресурс не перехватывается Service Worker, свойство всегда вернёт 0.

Свойство workerStart может иметь следующие значения:

• Значение DOMHighResTimeStamp.
• 0 если не используется service worker.
• 0 если ресурс является запросом с другим происхождением и не используется заголовок HTTP ответа Timing-Allow-Origin.

Свойства 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`,
    );
  }
});

Если значение свойства workerStart равно 0, ресурс может быть запросом с другим происхождением. Для отображения информации о временных задержках ресурсов с другим происхождением необходимо установить заголовок HTTP ответа Timing-Allow-Origin.

Например, чтобы разрешить https://developer.mozilla.org видеть ресурсы с временными задержками, ресурс с другим происхождением должен отправлять:

Timing-Allow-Origin: https://developer.mozilla.org

• Timing-Allow-Origin