PerformanceResourceTiming

Beschreibung

Die Eigenschaften des Interfaces erstellen eine Ressourcenladezeitleiste mit hochauflösenden Zeitstempeln für Netzwerkereignisse wie Redirect-Start- und -Endzeiten, Fetch-Start, DNS-Lookup-Start- und -Endzeiten, Antwort-Start- und -Endzeiten und mehr. Zusätzlich erweitert das Interface PerformanceEntry mit anderen Eigenschaften, die Daten über die Größe der abgerufenen Ressource sowie den Ressourcentyp, der das Abrufen initiiert hat, bereitstellen.

Typische Ressourcen-Timing-Metriken

Die Eigenschaften dieses Interfaces ermöglichen die Berechnung bestimmter Ressourcen-Timing-Metriken. Häufige Anwendungsfälle sind:

• Messung der TCP-Handschlagzeit (connectEnd - connectStart)
• Messung der DNS-Lookup-Zeit (domainLookupEnd - domainLookupStart)
• Messung der Umleitungszeit (redirectEnd - redirectStart)
• Messung der Zwischenanfragezeit (firstInterimResponseStart - finalResponseHeadersStart)
• Messung der Anforderungszeit (responseStart - requestStart)
• Messung der Dokumentanforderungszeit (finalResponseHeadersStart - requestStart)
• Messung der TLS-Verhandlungszeit (requestStart - secureConnectionStart)
• Messung der Fetch-Zeit (ohne Umleitungen) (responseEnd - fetchStart)
• Messung der ServiceWorker-Verarbeitungszeit (fetchStart - workerStart)
• Überprüfung, ob Inhalte komprimiert wurden (decodedBodySize sollte nicht encodedBodySize sein)
• Überprüfung, ob lokale Caches getroffen wurden (transferSize sollte 0 sein)
• Überprüfung, ob moderne und schnelle Protokolle verwendet werden (nextHopProtocol sollte HTTP/2 oder HTTP/3 sein)
• Überprüfung, ob die richtigen Ressourcen renderblockierend sind (renderBlockingStatus)

Verwaltung der Ressourcen-Puffergrößen

Standardmäßig werden nur 250 Ressourcentiming-Einträge gepuffert. Für weitere Informationen siehe die Ressourcen-Puffergrößen im Resource Timing Leitfaden.

Timing-Informationen über Ursprünge hinweg

Viele der Ressourcentiming-Eigenschaften sind darauf beschränkt, 0 oder einen leeren String zurückzugeben, wenn die Ressource eine CORS-Anforderung ist. Um Timing-Informationen über Ursprünge hinweg freizugeben, muss der Timing-Allow-Origin HTTP-Antwortheader gesetzt werden.

Die Eigenschaften, die standardmäßig als 0 zurückgegeben werden, wenn das Laden einer Ressource von einem anderen Ursprung als dem der Webseite selbst erfolgt: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart und responseStart.

Beispielsweise sollte die CORS-Ressource die folgenden Header senden, um https://big.rakal.top zu erlauben, Ressourcentiming-Informationen zu sehen:

Timing-Allow-Origin: https://big.rakal.top

Instanzfelder

Geerbt von PerformanceEntry

Dieses Interface erweitert die folgenden PerformanceEntry Eigenschaften für Ressourcen-Performance-Eintragstypen, indem sie qualifiziert und eingeschränkt werden wie folgt:

PerformanceEntry.duration Schreibgeschützt

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

PerformanceEntry.entryType Schreibgeschützt

Gibt "resource" zurück.

PerformanceEntry.name Schreibgeschützt

Gibt die URL der Ressource zurück.

PerformanceEntry.startTime Schreibgeschützt

Gibt einen timestamp für den Zeitpunkt zurück, zu dem ein Ressourcenabruf gestartet wurde. Dieser Wert ist gleichwertig zu PerformanceResourceTiming.fetchStart.

Zeitstempel

Das Interface unterstützt die folgenden Zeitstempel-Eigenschaften, die Sie im Diagramm sehen können und die in der Reihenfolge aufgeführt sind, in der sie für das Abrufen einer Ressource aufgezeichnet werden. Eine alphabetische Liste finden Sie in der Navigation links.

PerformanceResourceTiming.redirectStart Schreibgeschützt

Ein DOMHighResTimeStamp, der die Startzeit des Abrufs darstellt, der die Umleitung einleitet.

PerformanceResourceTiming.redirectEnd Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nach Erhalt des letzten Bytes der Antwort der letzten Umleitung.

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp unmittelbar vor der Verteilung 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 Schreibgeschützt

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

PerformanceResourceTiming.domainLookupStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser das Domain-Namensnachschlagen für die Ressource startet.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach Abschluss des Domain-Namensnachschlagens für die Ressource darstellt.

PerformanceResourceTiming.connectStart Schreibgeschützt

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

PerformanceResourceTiming.secureConnectionStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser beginnt, den Handshake-Prozess zur Sicherstellung der aktuellen Verbindung zu starten.

PerformanceResourceTiming.connectEnd Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser die Verbindung zum Server für den Abruf der Ressource abgeschlossen hat.

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Experimentell Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zwischenantwortzeiten (zum Beispiel 100 Continue oder 103 Early Hints) darstellt.

PerformanceResourceTiming.responseStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das erste Byte der Antwort vom Server erhält (was eine Zwischenantwort sein kann).

PerformanceResourceTiming.finalResponseHeadersStart Experimentell Schreibgeschützt

Ein DOMHighResTimeStamp, der die endgültige Kopfzeilenantwortzeit (zum Beispiel 200 Success) darstellt, nach jeder Zwischenantwortzeit.

PerformanceResourceTiming.responseEnd Schreibgeschützt

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

Zusätzliche Ressourceninformationen

Darüber hinaus stellt dieses Interface die folgenden Eigenschaften bereit, die weitere Informationen über eine Ressource enthalten:

PerformanceResourceTiming.contentType Schreibgeschützt Experimentell

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

PerformanceResourceTiming.decodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) der Nachrichtennutzlast nach der Entfernung jeglicher angewandter Inhaltskodierung darstellt, die durch den Abruf (HTTP oder Cache) erhalten wurde.

PerformanceResourceTiming.deliveryType Experimentell Schreibgeschützt

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

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) der Abrufnachricht (HTTP oder Cache) für den Nutzlastkörper darstellt, bevor jegliche angewandte Inhaltskodierungen entfernt werden.

PerformanceResourceTiming.initiatorType Schreibgeschützt

Ein String, der das Webplattform-Feature beschreibt, das den Performance-Eintrag initiiert hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

Ein String, der das Netzwerkprotokoll darstellt, das zum Abrufen der Ressource verwendet wurde, wie es durch die ALPN-Protokoll-ID (RFC7301) identifiziert wurde.

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

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

PerformanceResourceTiming.responseStatus Schreibgeschützt

Eine Zahl, die den HTTP-Antwortstatuscode darstellt, der beim Abrufen der Ressource zurückgegeben wird.

PerformanceResourceTiming.transferSize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) der abgerufenen Ressource darstellt. Die Größe umfasst die Antwortkopfzeilenfelder sowie den Antwort-Payload-Body.

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

Instanzmethoden

PerformanceResourceTiming.toJSON()

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

Beispiele

Protokollierung von Ressourcentiming-Informationen

Beispiel unter Verwendung eines PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge vor der Erzeugung des Observers zuzugreifen.

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

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

Beispiel unter Verwendung von Performance.getEntriesByType(), das nur resource-Performance-Einträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode 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

• Ressourcentiming (Übersicht)