PerformanceResourceTiming

Beschreibung

Die Eigenschaften der Schnittstelle bilden anhand hochauflsender Zeitstempel eine Zeitleiste fr das Laden einer Ressource. Sie erfasst Netzwerkereignisse wie Beginn und Ende von Weiterleitungen, Beginn des Abrufs, Beginn und Ende der DNS-Abfrage sowie Beginn und Ende der Antwort. Darber hinaus erweitert die Schnittstelle PerformanceEntry um Eigenschaften, die Aufschluss ber die Gre der abgerufenen Ressource und den Typ der Ressource geben, die den Abruf ausgelst hat.

Typische Zeitmesswerte fr Ressourcen

Mit den Eigenschaften dieser Schnittstelle knnen Sie verschiedene Zeitmesswerte fr Ressourcen berechnen. Hufige Anwendungsflle sind:

• Messen der Dauer des TCP-Handshakes (connectEnd - connectStart)
• Messen der Dauer der DNS-Abfrage (domainLookupEnd - domainLookupStart)
• Messen der Dauer von Weiterleitungen (redirectEnd - redirectStart)
• Messen der Zeit bis zur vorlufigen Antwort (firstInterimResponseStart - finalResponseHeadersStart)
• Messen der Anfragedauer (responseStart - requestStart)
• Messen der Dauer einer Dokumentanfrage (finalResponseHeadersStart - requestStart)
• Messen der Dauer der TLS-Aushandlung (requestStart - secureConnectionStart)
• Messen der Abrufdauer ohne Weiterleitungen (responseEnd - fetchStart)
• Messen der Verarbeitungsdauer im Service Worker (fetchStart - workerStart)
• Prfen, ob Inhalte komprimiert wurden (decodedBodySize sollte nicht gleich encodedBodySize sein)
• Prfen, ob lokale Caches verwendet wurden (transferSize sollte 0 sein)
• Prfen, ob moderne und schnelle Protokolle verwendet werden (nextHopProtocol sollte HTTP/2 oder HTTP/3 sein)
• Prfen, ob die richtigen Ressourcen das Rendering blockieren (renderBlockingStatus)

Gre des Ressourcenpuffers verwalten

Standardmig werden nur 250 Eintrge mit Zeitmessdaten fr Ressourcen gepuffert. Weitere Informationen finden Sie unter Gre des Ressourcenpuffers im Leitfaden zu Resource Timing.

Zeitmessinformationen fr Cross-Origin-Ressourcen

Viele Eigenschaften fr die Zeitmessung von Ressourcen geben 0 oder eine leere Zeichenfolge zurck, wenn es sich um eine Cross-Origin-Anfrage handelt. Damit Zeitmessinformationen fr Cross-Origin-Ressourcen verfgbar sind, muss der HTTP-Antwort-Header Timing-Allow-Origin gesetzt werden.

Die folgenden Eigenschaften geben standardmig 0 zurck, wenn eine Ressource von einer anderen Origin als der Webseite selbst geladen wird: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart und responseStart.

Damit beispielsweise https://developer.mozilla.org die Zeitmessinformationen einer Ressource einsehen kann, sollte die Cross-Origin-Ressource Folgendes senden:

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

Instanzeigenschaften

Von PerformanceEntry geerbt

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry fr Performance-Eintrge vom Typ Ressource, indem sie diese wie folgt przisiert und einschrnkt:

PerformanceEntry.duration Schreibgeschtzt

Gibt einen timestamp zurck, der die Differenz zwischen den Eigenschaften responseEnd und startTime darstellt.

PerformanceEntry.entryType Schreibgeschtzt

Gibt "resource" zurck.

PerformanceEntry.name Schreibgeschtzt

Gibt die URL der Ressource zurck.

PerformanceEntry.startTime Schreibgeschtzt

Gibt den timestamp fr den Zeitpunkt zurck, zu dem der Abruf einer Ressource begann. Wenn keine HTTP-Weiterleitungen vorliegen oder deren Zeitmessinformationen nicht verfgbar sind, entspricht dieser Wert PerformanceResourceTiming.fetchStart. Andernfalls kann dieser Wert vor fetchStart liegen.

Zeitstempel

Die Schnittstelle untersttzt die folgenden Zeitstempel-Eigenschaften. Sie sind im Diagramm dargestellt und in der Reihenfolge aufgefhrt, in der sie beim Abrufen einer Ressource erfasst werden. Links in der Navigation finden Sie eine alphabetische Auflistung.

[Zeitstempeldiagramm mit Zeitstempeln in der Reihenfolge, in der sie beim Abrufen einer Ressource erfasst werden]

PerformanceResourceTiming.redirectStart Schreibgeschtzt

Ein DOMHighResTimeStamp, der den Beginn des Abrufs angibt, der die Weiterleitung auslst.

PerformanceResourceTiming.redirectEnd Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar nach dem Empfang des letzten Bytes der Antwort auf die letzte Weiterleitung.

PerformanceResourceTiming.workerStart Schreibgeschtzt

Gibt einen DOMHighResTimeStamp fr den Zeitpunkt unmittelbar vor dem Auslsen des FetchEvent zurck, wenn bereits ein Service-Worker-Thread luft. Luft noch keiner, bezeichnet der Zeitstempel den Zeitpunkt unmittelbar vor dem Start des Service-Worker-Threads. Wenn die Ressource nicht von einem Service Worker abgefangen wird, gibt die Eigenschaft immer 0 zurck.

PerformanceResourceTiming.fetchStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar bevor der Browser mit dem Abruf der Ressource beginnt. Wenn keine HTTP-Weiterleitungen vorliegen oder deren Zeitmessinformationen nicht verfgbar sind, entspricht dieser Wert PerformanceEntry.startTime. Andernfalls kann dieser Wert nach startTime liegen.

PerformanceResourceTiming.domainLookupStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar bevor der Browser die DNS-Abfrage fr die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar nachdem der Browser die DNS-Abfrage fr die Ressource abgeschlossen hat.

PerformanceResourceTiming.connectStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar bevor der Browser beginnt, die Verbindung zum Server fr den Abruf der Ressource herzustellen.

PerformanceResourceTiming.secureConnectionStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar bevor der Browser den Handshake zur Absicherung der aktuellen Verbindung beginnt.

PerformanceResourceTiming.connectEnd Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar nachdem der Browser die Verbindung zum Server fr den Abruf der Ressource hergestellt hat.

PerformanceResourceTiming.requestStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar bevor der Browser beginnt, die Ressource beim Server anzufordern.

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschtzt

Ein DOMHighResTimeStamp, der den Zeitpunkt einer vorlufigen Antwort angibt, beispielsweise 100 Continue oder 103 Early Hints.

PerformanceResourceTiming.responseStart Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar nachdem der Browser das erste Byte der Serverantwort empfangen hat. Dabei kann es sich auch um eine vorlufige Antwort handeln.

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschtzt

Ein DOMHighResTimeStamp, der den Zeitpunkt der endgltigen Antwort-Header angibt, beispielsweise bei 200 Success, nach etwaigen vorlufigen Antworten.

PerformanceResourceTiming.responseEnd Schreibgeschtzt

Ein DOMHighResTimeStamp fr den Zeitpunkt unmittelbar nachdem der Browser das letzte Byte der Ressource empfangen hat oder unmittelbar bevor die Transportverbindung geschlossen wird je nachdem, was zuerst eintritt.

Zustzliche Informationen zur Ressource

Darber hinaus stellt diese Schnittstelle die folgenden Eigenschaften mit weiteren Informationen zu einer Ressource bereit:

PerformanceResourceTiming.contentType Schreibgeschtzt

Eine Zeichenfolge, die eine minimierte und standardisierte Version des MIME-Typs der abgerufenen Ressource darstellt.

PerformanceResourceTiming.contentEncoding Schreibgeschtzt

Eine Zeichenfolge, die das Content-Encoding der abgerufenen Ressource darstellt.

PerformanceResourceTiming.decodedBodySize Schreibgeschtzt

Eine Zahl, die die Gre des beim Abruf (ber HTTP oder aus dem Cache) empfangenen Nachrichtenkrpers in Oktetten angibt, nachdem eine etwaige Inhaltskodierung entfernt wurde.

PerformanceResourceTiming.deliveryType Schreibgeschtzt

Gibt an, wie die Ressource bereitgestellt wurde beispielsweise aus dem Cache oder durch einen vorgezogenen Abruf fr die Navigation.

PerformanceResourceTiming.encodedBodySize Schreibgeschtzt

Eine Zahl, die die Gre des beim Abruf (ber HTTP oder aus dem Cache) empfangenen Nutzdatenkrpers in Oktetten angibt, bevor etwaige Inhaltskodierungen entfernt wurden.

PerformanceResourceTiming.initiatorType Schreibgeschtzt

Eine Zeichenfolge, die die Webplattform-Funktion angibt, die den Performance-Eintrag ausgelst hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschtzt

Eine Zeichenfolge, die das fr den Abruf der Ressource verwendete Netzwerkprotokoll angibt, identifiziert durch die ALPN-Protokoll-ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatus Schreibgeschtzt

Eine Zeichenfolge, die angibt, ob die Ressource das Rendering blockiert. Der Wert ist entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Schreibgeschtzt

Eine Zahl, die den beim Abrufen der Ressource zurckgegebenen HTTP-Antwortstatuscode angibt.

PerformanceResourceTiming.transferSize Schreibgeschtzt

Eine Zahl, die die Gre der abgerufenen Ressource in Oktetten angibt. Sie umfasst die Antwort-Header-Felder und den Nutzdatenkrper der Antwort.

PerformanceResourceTiming.serverTiming Schreibgeschtzt

Ein Array von PerformanceServerTiming-Eintrgen mit Zeitmesswerten des Servers.

Instanzmethoden

PerformanceResourceTiming.toJSON()

Gibt ein einfaches, als JSON serialisierbares Objekt zurck, das das PerformanceResourceTiming-Objekt darstellt. Die Methode wird automatisch von JSON.stringify() aufgerufen.

Beispiele

Zeitmessinformationen fr Ressourcen protokollieren

Dieses Beispiel verwendet einen PerformanceObserver, der ber neue Performance-Eintrge vom Typ resource benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers erfasst werden. Verwenden Sie die Option buffered, um auch auf Eintrge zuzugreifen, die vor dem Erstellen des Observers erfasst wurden.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "resource", buffered: true });

Dieses Beispiel verwendet Performance.getEntriesByType(). Die Methode zeigt nur Performance-Eintrge vom Typ resource an, die zum Zeitpunkt ihres Aufrufs in der Performance-Zeitleiste des Browsers vorhanden sind:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  console.log(entry);
});

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Zeitmessung fr Ressourcen (berblick)