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 derTiming-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:
Timing-Allow-Origin: https://developer.mozilla.org
Spezifikationen
Specification |
---|
Resource Timing # dom-performanceresourcetiming-workerstart |
Browser-Kompatibilität
BCD tables only load in the browser