Resource timing
Resource Timing ist Teil der Performance API und ermglicht das Abrufen und Analysieren detaillierter Netzwerktiming-Daten fr das Laden von Ressourcen einer Anwendung. Eine Anwendung kann die Timing-Metriken verwenden, um beispielsweise die Dauer zu bestimmen, die bentigt wird, um eine bestimmte Ressource (wie ein Bild oder ein Skript) entweder implizit als Teil des Seitenladens oder explizit von JavaScript zu laden, zum Beispiel mit der fetch() API.
Jede Ressource in einem Dokument wird durch einen PerformanceResourceTiming-Eintrag (der das PerformanceEntry-Interface erweitert) mit dem entryType von "resource" dargestellt.
Fr jeden PerformanceResourceTiming-Eintrag wird eine Ressourcenlade-Timeline aufgezeichnet, mit Hochauflsungs-Zeitstempeln fr Netzwerkevents wie Start- und Endzeiten von Weiterleitungen, Start- und Endzeiten von DNS-Lookups, Anfragebeginn, Start und Ende der Antwort und so weiter. Neben den Zeitstempeln sind auch andere Eigenschaften enthalten, die Informationen ber die Ressource bieten, wie zum Beispiel die Gre der abgerufenen Ressource oder der Typ der Ressource, die die Abfrage initiiert hat.
Siehe Typische Ressourcen-Timing-Metriken auf der Referenzseite fr das PerformanceResourceTiming-Interface.
In diesem Artikel
- Ressourcenlade-Zeitstempel
- Ressourcengre
- Andere Eigenschaften
- Verwalten der Ressourcenspeichergren
- Cross-Origin-Timing-Informationen
- Siehe auch
Ressourcenlade-Zeitstempel
[Zeitstempeldiagramm, das die Zeitstempel in der Reihenfolge auflistet, in der sie fr das Abrufen einer Ressource aufgezeichnet werden]
Abbildung 1. Ressourcenlade-Zeitstempel (Quelle).
![[Zeitstempeldiagramm, das die Zeitstempel in der Reihenfolge auflistet, in der sie fr das Abrufen einer Ressource aufgezeichnet werden]](https://mdn.github.io/shared-assets/images/diagrams/api/performance/resource-timing/timestamp-diagram.svg){kind=link}
Eine Anwendung kann Zeitstempel fr die verschiedenen Phasen abrufen, die zum Laden einer Ressource verwendet werden. Zum Beispiel die startTime, DNS-Zeitstempel, Verbindungsaufbauzeiten und dann verschiedene Ressourcen-Downloadzeiten.
Siehe Zeitstempel auf der Referenzseite fr das PerformanceResourceTiming-Interface.
Ressourcengre
Das PerformanceResourceTiming-Interface hat drei Eigenschaften, die genutzt werden knnen, um Greninformationen ber eine Ressource zu erhalten. Die transferSize-Eigenschaft gibt die Gre (in Bytes) der abgerufenen Ressource zurck, einschlielich der Antwortheader-Felder und des Antwortnutzlastkrpers.
Die encodedBodySize-Eigenschaft gibt die Gre (in Oktetten) zurck, die aus dem Abruf (HTTP oder Cache) empfangen wurde, des Nutzlastkrpers, vor dem Entfernen angewendeter Inhaltscodierungen. decodedBodySize gibt die Gre (in Oktetten) zurck, die aus dem Abruf (HTTP oder Cache) empfangen wurde, des Nachrichtenkrpers, nachdem alle angewendeten Inhaltscodierungen entfernt wurden.
Andere Eigenschaften
Das PerformanceResourceTiming-Interface bietet zustzliche Ressourceninformationen. Konsultieren Sie die Referenzdokumentation fr die vollstndige Liste der Eigenschaften.
Verwalten der Ressourcenspeichergren
Wenn Ihre Website oder Anwendung mehr als 250 Ressourcen abruft und Sie mehr als 250 PerformanceResourceTiming-Eintrge aufzeichnen mchten, mssen Sie die Gre des Ressourcentiming-Puffers erhhen.
Um die Gre des Ressourcendatenpuffers des Browsers einzustellen, verwenden Sie die Methode Performance.setResourceTimingBufferSize(), und um den Ressourcendatenpuffer des Browsers zu leeren, verwenden Sie die Methode Performance.clearResourceTimings().
Um benachrichtigt zu werden, wenn der Ressourcentiming-Puffer des Browsers voll ist, hren Sie auf das resourcetimingbufferfull-Event.
Der folgende Aufruf erlaubt 500 "resource"-Performance-Eintrge in der Performance-Timeline des Browsers.
performance.setResourceTimingBufferSize(500);
Fr weitere Informationen siehe auch Verwalten von Pufferspeichergren.
Cross-Origin-Timing-Informationen
Viele der Ressourcentiming-Eigenschaften sind eingeschrnkt und geben 0 oder einen leeren String zurck, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Timing-Informationen freizugeben, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.
Fr weitere Informationen zu den betroffenen Feldern siehe Cross-Origin-Timing-Informationen auf der Referenzseite fr das PerformanceResourceTiming-Interface.