Resource timing
Resource Timing ist Teil der Performance API und ermöglicht das Abrufen und Analysieren detaillierter Netzwerk-Timing-Daten für das Laden von Ressourcen einer Anwendung. Eine Anwendung kann die Timing-Metriken verwenden, um beispielsweise die Zeit zu ermitteln, die zum Laden einer bestimmten Ressource (wie eines Bildes oder Skripts) benötigt wird, entweder implizit als Teil des Seitenladens oder explizit von JavaScript, z. B. unter Verwendung der fetch() API.
Jede Ressource in einem Dokument wird durch einen PerformanceResourceTiming-Eintrag (der das PerformanceEntry-Interface erweitert) mit dem entryType "resource" dargestellt.
Für jeden PerformanceResourceTiming-Eintrag wird eine Ressourcen-Ladezeitachse aufgezeichnet, mit Hochauflösende Zeitstempel für Netzwerkereignisse wie Umleitungsstart- und Endzeiten, DNS-Lookup-Start- und Endzeiten, Anforderungsstart, Antwortstart- und Endzeiten und so weiter. Neben den Zeitstempeln sind auch andere Eigenschaften enthalten, die Informationen über die Ressource liefern, wie die Größe der abgerufenen Ressource oder der Typ der Ressource, die den Abruf initiiert hat.
Siehe Typische Resource Timing Metriken auf der Referenzseite für das PerformanceResourceTiming-Interface.
Ressourcen-Ladezeitstempel
Abbildung 1. Ressourcen-Ladezeitstempel (Quelle).
Eine Anwendung kann Zeitstempel für die verschiedenen Stadien abrufen, die zum Laden einer Ressource verwendet werden. Zum Beispiel den startTime, DNS-Zeitstempel, Verbindungsaufbauzeiten und dann verschiedene Ressourcendownloadzeiten.
Siehe Zeitstempel auf der Referenzseite für das PerformanceResourceTiming-Interface.
Ressourcengröße
Das PerformanceResourceTiming-Interface verfügt über drei Eigenschaften, die verwendet werden können, um Größendaten über eine Ressource zu erhalten. Die transferSize-Eigenschaft gibt die Größe (in Bytes) der abgerufenen Ressource zurück, einschließlich der Antwort-Header-Felder plus des Antwort-Payloads.
Die encodedBodySize-Eigenschaft gibt die Größe (in Oktetten) des vom Abruf (HTTP oder Cache) empfangenen Payloads zurück, bevor angewandte Inhalts-Codierungen entfernt werden. decodedBodySize gibt die Größe (in Oktetten) des vom Abruf (HTTP oder Cache) empfangenen Nachrichtenkörpers zurück, nachdem angewandte Inhalts-Codierungen entfernt wurden.
Andere Eigenschaften
Das PerformanceResourceTiming-Interface bietet zusätzliche Ressourceninformationen. Konsultieren Sie die Referenzdokumente für die vollständige Liste der Eigenschaften.
Verwaltung der Ressourcenspeicherpuffergrößen
Wenn Ihre Website oder Anwendung mehr als 250 Ressourcen abruft und Sie mehr als 250 PerformanceResourceTiming-Einträge aufzeichnen möchten, müssen Sie die Größe des Ressourcentiming-Puffers erhöhen.
Um die Größe des Performance-Ressourcendatenpuffers des Browsers festzulegen, verwenden Sie die Methode Performance.setResourceTimingBufferSize(), und um den Performance-Ressourcendatenpuffer des Browsers zu leeren, verwenden Sie die Methode Performance.clearResourceTimings().
Um benachrichtigt zu werden, wenn der Resource-Timing-Puffer des Browsers voll ist, hören Sie auf das Ereignis resourcetimingbufferfull.
Der folgende Aufruf ermöglicht 500 "resource"-Performance-Einträge in der Performance-Zeitachse des Browsers.
performance.setResourceTimingBufferSize(500);
Für weitere Informationen siehe auch Verwaltung der Puffergrößen.
Cross-Origin-Timing-Informationen
Viele der Resource-Timing-Eigenschaften sind darauf beschränkt, 0 oder einen leeren String zurückzugeben, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Timing-Informationen freizugeben, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.
Für weitere Informationen zu den betroffenen Feldern siehe Cross-Origin-Timing-Informationen auf der Referenzseite für das PerformanceResourceTiming-Interface.