PerformanceResourceTiming

Instanzeigenschaften

Von PerformanceEntry geerbt

Diese Schnittstelle erweitert die folgenden Eigenschaften von PerformanceEntry für Performance-Einträge vom Typ „resource“, indem sie diese wie folgt präzisiert und einschränkt:

PerformanceEntry.duration Schreibgeschützt

Gibt einen timestamp zurück, der die Differenz zwischen den Eigenschaften responseEnd und startTime angibt.

PerformanceEntry.entryType Schreibgeschützt

Gibt "resource" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt die URL der Ressource zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt den timestamp für den Zeitpunkt zurück, zu dem das Abrufen einer Ressource begonnen hat. Wenn keine HTTP-Weiterleitungen stattfinden oder deren Zeitinformationen nicht offengelegt werden, entspricht dieser Wert PerformanceResourceTiming.fetchStart. Andernfalls kann dieser Wert vor fetchStart liegen.

Zeitstempel

Die Schnittstelle unterstützt die folgenden Zeitstempel-Eigenschaften. Sie sind im Diagramm dargestellt und hier in der Reihenfolge aufgeführt, in der sie beim Abrufen einer Ressource erfasst werden. Eine alphabetische Auflistung finden Sie links in der Navigation.

PerformanceResourceTiming.redirectStart Schreibgeschützt

Ein DOMHighResTimeStamp, der den Beginn des Abrufvorgangs angibt, der die Weiterleitung auslöst.

PerformanceResourceTiming.redirectEnd Schreibgeschützt

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

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp für den Zeitpunkt unmittelbar vor dem Auslösen des FetchEvent zurück, wenn bereits ein Service-Worker-Thread läuft, oder unmittelbar vor dem Starten des Service-Worker-Threads, wenn noch keiner läuft. Wird die Ressource nicht von einem Service Worker abgefangen, gibt die Eigenschaft stets 0 zurück.

PerformanceResourceTiming.fetchStart Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar bevor der Browser beginnt, die Ressource abzurufen. Wenn keine HTTP-Weiterleitungen stattfinden oder deren Zeitinformationen nicht offengelegt werden, entspricht dieser Wert PerformanceEntry.startTime. Andernfalls kann dieser Wert nach startTime liegen.

PerformanceResourceTiming.domainLookupStart Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar bevor der Browser mit der Auflösung des Domainnamens für die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach Abschluss der Auflösung des Domainnamens für die Ressource durch den Browser angibt.

PerformanceResourceTiming.connectStart Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar bevor der Browser beginnt, eine Verbindung zum Server herzustellen, um die Ressource abzurufen.

PerformanceResourceTiming.secureConnectionStart Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar bevor der Browser den Handshake zur Absicherung der aktuellen Verbindung beginnt.

PerformanceResourceTiming.connectEnd Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar nachdem der Browser die Verbindung zum Server hergestellt hat, um die Ressource abzurufen.

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt einer vorläufigen Antwort angibt (beispielsweise 100 Continue oder 103 Early Hints).

PerformanceResourceTiming.responseStart Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar nachdem der Browser das erste Byte der Antwort vom Server empfangen hat (bei der es sich um eine vorläufige Antwort handeln kann).

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt der endgültigen Antwort-Header angibt (beispielsweise 200 Success), nach etwaigen vorläufigen Antworten.

PerformanceResourceTiming.responseEnd Schreibgeschützt

Ein DOMHighResTimeStamp für den Zeitpunkt unmittelbar nachdem der Browser das letzte Byte der Ressource empfangen hat oder unmittelbar bevor die Transportverbindung geschlossen wird – je nachdem, welches Ereignis zuerst eintritt.

Zusätzliche Informationen zur Ressource

Darüber hinaus stellt diese Schnittstelle die folgenden Eigenschaften mit weiteren Informationen über eine Ressource bereit:

PerformanceResourceTiming.contentType Schreibgeschützt

Ein String, der eine minimierte und standardisierte Version des MIME-Typs der abgerufenen Ressource darstellt.

PerformanceResourceTiming.contentEncoding Schreibgeschützt

Ein String, der den Content-Encoding der abgerufenen Ressource darstellt.

PerformanceResourceTiming.decodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des beim Abruf empfangenen Nachrichtenkörpers (über HTTP oder aus dem Cache) nach dem Entfernen einer gegebenenfalls angewendeten Inhaltskodierung angibt.

PerformanceResourceTiming.deliveryType Schreibgeschützt

Gibt an, wie die Ressource bereitgestellt wurde – beispielsweise aus dem Cache oder durch ein Vorabrufen für eine Navigation.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des beim Abruf empfangenen Nutzdatenkörpers (über HTTP oder aus dem Cache) vor dem Entfernen gegebenenfalls angewendeter Inhaltskodierungen angibt.

PerformanceResourceTiming.initiatorType Schreibgeschützt

Ein String, der die Webplattform-Funktion angibt, die den Performance-Eintrag ausgelöst hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

Ein String, der das zum Abrufen der Ressource verwendete Netzwerkprotokoll angibt, identifiziert anhand der ALPN Protocol ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

Ein String, der angibt, ob die Ressource das Rendern blockiert. Der Wert ist entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Schreibgeschützt

Eine Zahl, die den beim Abrufen der Ressource zurückgegebenen HTTP-Antwortstatuscode angibt.

PerformanceResourceTiming.transferSize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) der abgerufenen Ressource angibt. Sie setzt sich aus der Größe des Antwortkörpers und einem festen Wert zusammen, der stellvertretend für die Größe der Antwort-Header steht.

PerformanceResourceTiming.serverTiming Schreibgeschützt

Ein Array von PerformanceServerTiming-Einträgen mit serverseitigen Zeitmesswerten.

Instanzmethoden

PerformanceResourceTiming.toJSON()

Gibt ein einfaches, JSON-serialisierbares Objekt zurück, das das PerformanceResourceTiming-Objekt darstellt. Wird von JSON.stringify() automatisch aufgerufen.

Beschreibung

Die Eigenschaften der Schnittstelle bilden eine Zeitleiste des Ladens einer Ressource mit hochauflösenden Zeitstempeln für Netzwerkereignisse, etwa für Beginn und Ende von Weiterleitungen, den Beginn des Abrufvorgangs, Beginn und Ende der DNS-Auflösung sowie Beginn und Ende der Antwort. Darüber hinaus erweitert die Schnittstelle PerformanceEntry um weitere Eigenschaften, die Daten zur Größe der abgerufenen Ressource und zum Ressourcentyp bereitstellen, der den Abruf ausgelöst hat.

Typische Zeitmesswerte für Ressourcen

Mit den Eigenschaften dieser Schnittstelle können Sie bestimmte Zeitmesswerte für Ressourcen berechnen. Häufige Anwendungsfälle sind:

• Messen der Dauer des TCP-Handshakes (connectEnd - connectStart)
• Messen der Dauer der DNS-Auflösung (domainLookupEnd - domainLookupStart)
• Messen der Dauer von Weiterleitungen (redirectEnd - redirectStart)
• Messen der Dauer bis zur vorläufigen Antwort (firstInterimResponseStart - finalResponseHeadersStart)
• Messen der Anfragedauer (responseStart - requestStart)
• Messen der Dauer einer Dokumentanforderung (finalResponseHeadersStart - requestStart)
• Messen der Dauer der TLS-Aushandlung (requestStart - secureConnectionStart)
• Messen der Abrufdauer (ohne Weiterleitungen) (responseEnd - fetchStart)
• Messen der Verarbeitungsdauer des Service Workers (fetchStart - workerStart)
• Prüfen, ob der Inhalt komprimiert wurde (decodedBodySize sollte nicht gleich encodedBodySize sein)
• Prüfen, ob lokale Caches verwendet wurden (transferSize sollte 0 sein)
• Prüfen, ob moderne und schnelle Protokolle verwendet werden (nextHopProtocol sollte HTTP/2 oder HTTP/3 sein)
• Prüfen, ob die richtigen Ressourcen das Rendern blockieren (renderBlockingStatus)

Puffergrößen für Ressourcen verwalten

Standardmäßig werden nur 250 Zeitmess-Einträge für Ressourcen gepuffert. Weitere Informationen finden Sie unter Puffergrößen für Ressourcen im Leitfaden zu Resource Timing.

Einschränkungen bei ursprungsübergreifenden Ressourcen

Zeitmessinformationen für eine ursprungsübergreifende Ressource sind eingeschränkt, sofern die Ressource die Prüfung anhand von Timing-Allow-Origin nicht besteht. Dies betrifft die folgenden Eigenschaften, die beim Laden einer Ressource von einem anderen Ursprung als dem der Webseite standardmäßig 0, einen leeren String oder ein leeres Array zurückgeben: redirectStart, redirectEnd, workerStart, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, firstInterimResponseStart, responseStart, finalResponseHeadersStart, nextHopProtocol, transferSize, deliveryType und serverTiming. Selbst eine Ressource, die die CORS-Prüfung besteht, benötigt Timing-Allow-Origin, damit diese Werte offengelegt werden.

Damit beispielsweise https://developer.mozilla.org Zeitmessinformationen einer Ressource einsehen kann, sollte die ursprungsübergreifende Ressource Folgendes senden:

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

Andere Eigenschaften beschreiben die Antwort selbst statt ihrer Zeitmesswerte und hängen von der CORS-Prüfung statt von der Prüfung anhand von Timing-Allow-Origin ab. Die Eigenschaften contentType, encodedBodySize, decodedBodySize und responseStatus geben für ursprungsübergreifende Ressourcen 0 oder einen leeren String zurück, sofern die Ressource nicht im Modus cors angefordert wurde und die CORS-Prüfung bestanden hat. Frame-Navigationen, etwa wenn ein <iframe> sein Dokument lädt, verwenden kein CORS. Daher werden die Größen ihrer Antwortkörper nur für Frames gleichen Ursprungs offengelegt, die ohne ursprungsübergreifende Weiterleitungen geladen wurden. Die Eigenschaft transferSize hängt von beiden Prüfungen ab: Ohne Timing-Allow-Origin ist ihr Wert 0, und wenn die Ressource die CORS-Prüfung nicht besteht, enthält der Wert die Größe des Antwortkörpers nicht.

Wenn das Dokument in einem ursprungsübergreifenden <iframe> die Prüfung anhand von Timing-Allow-Origin nicht besteht, meldet der Browser einen Ersatz-Eintrag. In diesem Eintrag bezeichnet responseEnd den Zeitpunkt, zu dem das iframe einschließlich seiner Unterressourcen vollständig geladen wurde. Weitere Informationen finden Sie unter Ursprungsübergreifende iframes.

Beispiele

Zeitmessinformationen für Ressourcen protokollieren

Dieses Beispiel verwendet einen PerformanceObserver, der über neue Performance-Einträge vom Typ resource benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers erfasst werden. Verwenden Sie die Option buffered, um auf Einträge zuzugreifen, die vor der Erstellung 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-Einträge 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-Kompatibilität

Siehe auch

• Resource Timing (Überblick)