PerformanceResourceTiming

Die Eigenschaften der Schnittstelle erstellen eine Ressourcelade-Zeitleiste mit hochauflösenden Zeitstempeln für Netzwerkereignisse wie Start- und Endzeiten von Weiterleitungen, Abrufstart, Start- und Endzeiten der DNS-Suche, Start- und Endzeiten der Antwort und mehr. Zusätzlich erweitert die Schnittstelle PerformanceEntry um weitere Eigenschaften, die Daten über die Größe der abgerufenen Ressource sowie über den Typ der Ressource, der den Abruf initiiert hat, bereitstellen.

Die Eigenschaften dieser Schnittstelle erlauben Ihnen die Berechnung bestimmter Ressourcentiming-Metriken. Häufige Anwendungsfälle beinhalten:

• Messen der TCP-Handshake-Zeit (connectEnd - connectStart)
• Messen der DNS-Suchzeit (domainLookupEnd - domainLookupStart)
• Messen der Umleitungszeit (redirectEnd - redirectStart)
• Messen der Zwischenanfragezeit (firstInterimResponseStart - requestStart)
• Messen der Anforderungszeit (responseStart - requestStart)
• Messen der TLS-Verhandlungszeit (requestStart - secureConnectionStart)
• Messen der Zeit zum Abrufen (ohne Umleitungen) (responseEnd - fetchStart)
• Messen der ServiceWorker-Verarbeitungszeit (fetchStart - workerStart)
• Überprüfen, ob Inhalte komprimiert wurden (decodedBodySize sollte nicht encodedBodySize sein)
• Überprüfen, ob lokale Caches verwendet wurden (transferSize sollte 0 sein)
• Überprüfen, ob moderne und schnelle Protokolle verwendet werden (nextHopProtocol sollte HTTP/2 oder HTTP/3 sein)
• Überprüfen, ob die richtigen Ressourcen render-blockierend sind (renderBlockingStatus)

Diese Schnittstelle erweitert die folgenden PerformanceEntry-Eigenschaften für Ressourcentypen von Leistungseinträgen, indem sie diese qualifiziert und einschränkt:

PerformanceEntry.duration Nur lesbar

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

PerformanceEntry.entryType Nur lesbar

Gibt "resource" zurück.

PerformanceEntry.name Nur lesbar

Gibt die URL der Ressource zurück.

PerformanceEntry.startTime Nur lesbar

Gibt den timestamp für die Zeit zurück, zu der ein Ressourcenabruf gestartet wurde. Dieser Wert entspricht PerformanceResourceTiming.fetchStart.

Die Schnittstelle unterstützt die folgenden Zeitstempel-Eigenschaften, die Sie im Diagramm sehen können und die in der Reihenfolge aufgelistet sind, in der sie beim Abrufen einer Ressource aufgezeichnet werden. Eine alphabetische Auflistung wird in der Navigation links angezeigt.

PerformanceResourceTiming.redirectStart Nur lesbar

Ein DOMHighResTimeStamp, der die Startzeit des Abrufs repräsentiert, der die Weiterleitung initiiert.

PerformanceResourceTiming.redirectEnd Nur lesbar

Ein DOMHighResTimeStamp unmittelbar nach dem Empfang des letzten Bytes der Antwort der letzten Weiterleitung.

PerformanceResourceTiming.workerStart Nur lesbar

Gibt einen DOMHighResTimeStamp unmittelbar vor dem Aufrufen des FetchEvent zurück, wenn ein Service Worker-Thread bereits läuft, oder unmittelbar bevor der Service Worker-Thread gestartet wird, wenn er noch nicht läuft. Wenn die Ressource nicht von einem Service Worker abgefangen wird, gibt die Eigenschaft immer 0 zurück.

PerformanceResourceTiming.fetchStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, die Ressource abzurufen.

PerformanceResourceTiming.domainLookupStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar bevor der Browser die Domänennamensuche für die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Nur lesbar

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach dem Abschluss der Domänennamensuche für die Ressource durch den Browser darstellt.

PerformanceResourceTiming.connectStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, die Verbindung zum Server herzustellen, um die Ressource abzurufen.

PerformanceResourceTiming.secureConnectionStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, den Handshake-Prozess zur Sicherung der aktuellen Verbindung auszuführen.

PerformanceResourceTiming.connectEnd Nur lesbar

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser die Verbindung zum Server zur Ressourcengewinnung hergestellt hat.

PerformanceResourceTiming.requestStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, die Ressource vom Server anzufordern.

PerformanceResourceTiming.firstInterimResponseStart Experimentell Nur lesbar

Ein DOMHighResTimeStamp, der die Zwischenanfragezeit repräsentiert (zum Beispiel 100 Continue oder 103 Early Hints).

PerformanceResourceTiming.responseStart Nur lesbar

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das erste Byte der Antwort vom Server erhält.

PerformanceResourceTiming.responseEnd Nur lesbar

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das letzte Byte der Ressource empfängt oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.

Darüber hinaus bietet diese Schnittstelle folgende Eigenschaften, die mehr Informationen über eine Ressource enthalten:

PerformanceResourceTiming.contentType Nur lesbar Experimentell

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

PerformanceResourceTiming.decodedBodySize Nur lesbar

Eine Zahl, die die Größe (in Oktetten) der vom Abruf (HTTP oder Cache) des Nachrichtenkörpers empfangenen Daten darstellt, nach Entfernung jeglicher angewandter Inhaltskodierung.

PerformanceResourceTiming.deliveryType Experimentell Nur lesbar

Gibt an, wie die Ressource geliefert wurde — zum Beispiel aus dem Cache oder aus einem Navigations-Vorladen.

PerformanceResourceTiming.encodedBodySize Nur lesbar

Eine Zahl, die die Größe (in Oktetten) der beim Abruf (HTTP oder Cache) empfangenen Nutzlast darstellt, bevor jegliche angewandte Inhaltskodierungen entfernt wurden.

PerformanceResourceTiming.initiatorType Nur lesbar

Ein String, der das Web-Plattform-Feature repräsentiert, welches den Leistungseintrag initiiert hat.

PerformanceResourceTiming.nextHopProtocol Nur lesbar

Ein String, der das Netzwerkprotokoll repräsentiert, das zum Abrufen der Ressource verwendet wird, wie durch die ALPN Protocol ID (RFC7301) identifiziert.

PerformanceResourceTiming.renderBlockingStatus Nur lesbar

Ein String, der den Render-Blockierungsstatus darstellt. Entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Nur lesbar

Eine Zahl, die den HTTP-Antwortstatuscode repräsentiert, der beim Abrufen der Ressource zurückgegeben wurde.

PerformanceResourceTiming.transferSize Nur lesbar

Eine Zahl, die die Größe (in Oktetten) der abgerufenen Ressource darstellt. Die Größe umfasst sowohl die Antwortheaderfelder als auch den Antwortnutzlastkörper.

PerformanceResourceTiming.serverTiming Nur lesbar

Ein Array von PerformanceServerTiming-Einträgen, die Timing-Metriken des Servers enthalten.

PerformanceResourceTiming.toJSON()

Gibt eine JSON-Darstellung des PerformanceResourceTiming-Objekts zurück.

Beispiel mit einem PerformanceObserver, der über neue resource-Leistungseinträge benachrichtigt, sobald sie in der Leistung-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge von vor der Erstellung des Beobachters zuzugreifen.

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

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

Beispiel mit Performance.getEntriesByType(), das nur resource-Leistungseinträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Leistung-Zeitleiste des Browsers vorhanden sind:

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

Viele der Eigenschaften für das Ressourcentiming sind auf 0 oder einen leeren String beschränkt, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Timing-Informationen offenzulegen, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Zum Beispiel, um https://developer.mozilla.org den Zugriff auf Ressourcentiming-Informationen zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

• Ressourcentiming (Übersicht)