Resource timing
Resource Timing ist Teil der Performance API und ermöglicht es, detaillierte Netzwerk-Zeitdaten zum Laden der Ressourcen einer Anwendung abzurufen und zu analysieren. Eine Anwendung kann anhand dieser Zeitmesswerte beispielsweise ermitteln, wie lange das Laden einer bestimmten Ressource (etwa eines Bildes oder eines Skripts) dauert – entweder implizit beim Laden der Seite oder explizit über JavaScript, zum Beispiel mit der fetch()-API.
Jede Ressource in einem Dokument wird durch einen PerformanceResourceTiming-Eintrag dargestellt, der das PerformanceEntry-Interface erweitert und dessen entryType "resource" ist.
Für jeden PerformanceResourceTiming-Eintrag wird eine Zeitleiste des Ressourcenladens aufgezeichnet. Sie enthält hochauflösende Zeitstempel für Netzwerkereignisse wie den Beginn und das Ende von Weiterleitungen und DNS-Abfragen sowie den Beginn der Anfrage und den Beginn und das Ende der Antwort. Neben den Zeitstempeln sind weitere Eigenschaften enthalten, die Informationen über die Ressource liefern, etwa die Größe der abgerufenen Ressource oder der Typ der Ressource, die den Abruf ausgelöst hat.
Siehe Typische Zeitmesswerte für Ressourcen auf der Referenzseite des PerformanceResourceTiming-Interfaces.
Zeitstempel beim Laden von Ressourcen
Abbildung 1. Zeitstempel beim Laden von Ressourcen (Quelle).
Eine Anwendung kann Zeitstempel für die verschiedenen Phasen beim Laden einer Ressource abrufen, beispielsweise startTime, DNS-Zeitstempel, Zeiten für den Verbindungsaufbau und verschiedene Zeitpunkte während des Herunterladens der Ressource.
Siehe Zeitstempel auf der Referenzseite des PerformanceResourceTiming-Interfaces.
Ressourcengröße
Das PerformanceResourceTiming-Interface verfügt über drei Eigenschaften, mit denen sich Größendaten einer Ressource abrufen lassen. Die Eigenschaft transferSize gibt die Größe (in Bytes) der abgerufenen Ressource einschließlich der Antwort-Header-Felder und des Antwort-Payload-Bodys zurück.
Die Eigenschaft encodedBodySize gibt die Größe (in Oktetten) des beim Abruf (über HTTP oder aus dem Cache) empfangenen Payload-Bodys zurück, bevor angewendete Inhaltskodierungen entfernt wurden. decodedBodySize gibt die Größe (in Oktetten) des beim Abruf (über HTTP oder aus dem Cache) empfangenen Nachrichtenbodys zurück, nachdem angewendete Inhaltskodierungen entfernt wurden.
Weitere Eigenschaften
Das PerformanceResourceTiming-Interface stellt weitere Informationen zu Ressourcen bereit. Die vollständige Liste der Eigenschaften finden Sie in der Referenzdokumentation.
Größe des Ressourcen-Timing-Puffers verwalten
Wenn Ihre Website oder Anwendung mehr als 250 Ressourcen abruft und Sie mehr als 250 PerformanceResourceTiming-Einträge erfassen möchten, müssen Sie den Ressourcen-Timing-Puffer vergrößern.
Um die Größe des Puffers für Ressourcen-Performancedaten des Browsers festzulegen, verwenden Sie die Methode Performance.setResourceTimingBufferSize(). Um den Puffer zu leeren, verwenden Sie die Methode Performance.clearResourceTimings().
Wenn Sie benachrichtigt werden möchten, sobald der Ressourcen-Timing-Puffer des Browsers voll ist, warten Sie auf das Ereignis resourcetimingbufferfull.
Der folgende Aufruf ermöglicht 500 Performance-Einträge vom Typ "resource" in der Performance-Zeitleiste des Browsers.
performance.setResourceTimingBufferSize(500);
Weitere Informationen finden Sie unter Puffergrößen verwalten.
Zeitdaten für Cross-Origin-Ressourcen
Viele Eigenschaften für Ressourcen-Zeitdaten dürfen nur 0 oder eine leere Zeichenfolge zurückgeben, wenn es sich bei der Ressource um eine Cross-Origin-Anfrage handelt. Damit Zeitdaten für Cross-Origin-Ressourcen zugänglich sind, muss der HTTP-Antwort-Header Timing-Allow-Origin gesetzt werden.
Welche Felder davon betroffen sind, erfahren Sie unter Cross-Origin-Einschränkungen auf der Referenzseite des PerformanceResourceTiming-Interfaces.