PerformanceResourceTiming: workerStart-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte Eigenschaft workerStart der Schnittstelle PerformanceResourceTiming gibt einen DOMHighResTimeStamp unmittelbar vor dem Dispatchen des FetchEvent zurück, wenn ein Service Worker-Thread bereits läuft, oder unmittelbar bevor der Service Worker-Thread gestartet wird, falls er noch nicht läuft. Wenn die Ressource nicht von einem Service Worker abgefangen wird, gibt die Eigenschaft immer 0 zurück.

Wert

Die workerStart-Eigenschaft kann folgende Werte haben:

Ein DOMHighResTimeStamp.
0, wenn kein Service Worker verwendet wird.
0, wenn die Ressource eine Cross-Origin-Anfrage ist und der Timing-Allow-Origin HTTP-Antwort-Header nicht verwendet wird.

Beispiele

Messung der Verarbeitungszeit von ServiceWorker

Die Eigenschaften workerStart und fetchStart können verwendet werden, um die Verarbeitungszeit eines ServiceWorker zu messen.

const workerProcessingTime = entry.fetchStart - entry.workerStart;

Beispiel mit einem PerformanceObserver, der benachrichtigt, wenn neue resource-Performance-Einträge in der Performance-Zeitleiste des Browsers erfasst werden. Verwenden Sie die buffered-Option, um auf Einträge von vor der Erstellung des Observers zuzugreifen.

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 });

Beispiel mit Performance.getEntriesByType(), das nur resource-Performance-Einträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

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`,
    );
  }
});

Informationen zur Cross-Origin-Timing

Wenn der Wert der workerStart-Eigenschaft 0 ist, könnte die Ressource eine Cross-Origin-Anfrage sein. Um Timing-Informationen für Cross-Origin zu sehen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Um beispielsweise https://developer.mozilla.org das Sehen von Timing-Ressourcen zu erlauben, sollte die Cross-Origin-Ressource senden:

http

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

Spezifikationen

Specification
Resource Timing # dom-performanceresourcetiming-workerstart

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Timing-Allow-Origin