PerformanceResourceTiming

Beschreibung

Die Eigenschaften der Schnittstelle erstellen eine Ressourcen-Ladezeitleiste mit hochauflösenden Zeitstempeln für Netzwerkereignisse wie Start- und Endzeiten von Weiterleitungen, Fetch-Start, Start- und Endzeiten der DNS-Suche, Start- und Endzeiten von Antworten und mehr. Zusätzlich erweitert die Schnittstelle PerformanceEntry um weitere Eigenschaften, die Daten über die Größe der abgerufenen Ressource sowie über den Ressourcentyp bereitstellen, der den Abruf ausgelöst hat.

Typische Ressourcen-Zeitmetriken

Die Eigenschaften dieser Schnittstelle ermöglichen die Berechnung bestimmter Ressourcen-Zeitmetriken. Häufige Anwendungsfälle sind:

• Messen der TCP-Handshake-Zeit (connectEnd - connectStart)
• Messen der DNS-Suchzeit (domainLookupEnd - domainLookupStart)
• Messen der Weiterleitungszeit (redirectEnd - redirectStart)
• Messen der Zeit für vorläufige Anfragen (firstInterimResponseStart - finalResponseHeadersStart)
• Messen der Anfragezeit (responseStart - requestStart)
• Messen der Dokumentanfragezeit (finalResponseHeadersStart - requestStart)
• Messen der TLS-Aushandlungszeit (requestStart - secureConnectionStart)
• Messen der Abrufzeit (ohne Weiterleitungen) (responseEnd - fetchStart)
• Messen der ServiceWorker-Verarbeitungszeit (fetchStart - workerStart)
• Prüfen, ob Inhalte komprimiert wurden (decodedBodySize sollte nicht encodedBodySize entsprechen)
• 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 Rendering blockieren (renderBlockingStatus)

Verwalten von Ressourcenspeichergrößen

Standardmäßig werden nur 250 Ressourcen-Zeiteinträge gepuffert. Weitere Informationen finden Sie unter Ressourcenspeichergrößen im Resource-Timing-Leitfaden.

Zeitinformationen für Cross-Origin

Viele der Ressourcen-Zeitgebungseigenschaften sind darauf beschränkt, 0 oder eine leere Zeichenfolge zurückzugeben, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Zeitinformationen offenzulegen, muss der HTTP-Antwortheader Timing-Allow-Origin gesetzt werden.

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

Um beispielsweise https://developer.mozilla.org das Anzeigen von Ressourcen-Zeitinformationen zu erlauben, sollte die Cross-Origin-Ressource Folgendes senden:

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

Instanzeigenschaften

Geerbt von PerformanceEntry

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

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 den timestamp für den Zeitpunkt zurück, zu dem ein Ressourcenabruf gestartet wurde. Wenn keine HTTP-Weiterleitungen vorhanden sind oder deren Zeitinformationen nicht offengelegt werden, entspricht dieser Wert PerformanceResourceTiming.fetchStart. Andernfalls kann dieser Wert früher als fetchStart liegen.

Zeitstempel

Die Schnittstelle unterstützt die folgenden Zeitstempeleigenschaften, die Sie im Diagramm sehen und die in der Reihenfolge aufgeführt sind, in der sie beim Abrufen einer Ressource aufgezeichnet werden. Eine alphabetische Auflistung wird links in der Navigation angezeigt.

PerformanceResourceTiming.redirectStart Schreibgeschützt

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

PerformanceResourceTiming.redirectEnd Schreibgeschützt

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

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp unmittelbar vor dem Auslösen des FetchEvent zurück, falls ein Service-Worker-Thread bereits läuft, oder unmittelbar vor dem Starten des Service-Worker-Threads, falls dieser 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. Wenn keine HTTP-Weiterleitungen vorhanden sind oder deren Zeitinformationen nicht offengelegt werden, entspricht dieser Wert PerformanceEntry.startTime. Andernfalls kann dieser Wert später als startTime liegen.

PerformanceResourceTiming.domainLookupStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser die Suche nach dem Domainnamen für die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach dem Abschluss der Suche nach dem Domainnamen für die Ressource durch den Browser darstellt.

PerformanceResourceTiming.connectStart Schreibgeschützt

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

PerformanceResourceTiming.secureConnectionStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser den Handshake-Prozess zum Sichern der aktuellen Verbindung beginnt.

PerformanceResourceTiming.connectEnd Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser die Herstellung der Verbindung mit dem Server zum Abrufen der Ressource abgeschlossen hat.

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

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

PerformanceResourceTiming.responseStart Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das erste Byte der Antwort vom Server empfängt (bei der es sich um eine vorläufige Antwort handeln kann).

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

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

PerformanceResourceTiming.responseEnd Schreibgeschützt

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.

Zusätzliche Ressourceninformationen

Zusätzlich stellt diese Schnittstelle die folgenden Eigenschaften bereit, die weitere Informationen über eine Ressource enthalten:

PerformanceResourceTiming.contentType Schreibgeschützt

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

PerformanceResourceTiming.decodedBodySize Schreibgeschützt

Eine Zahl, die die beim Abruf (HTTP oder Cache) des Nachrichtenkörpers empfangene Größe (in Oktetten) nach dem Entfernen aller angewendeten Inhaltskodierungen angibt.

PerformanceResourceTiming.deliveryType Schreibgeschützt

Gibt an, wie die Ressource bereitgestellt wurde — beispielsweise aus dem Cache oder durch einen navigationsbezogenen Prefetch.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die beim Abruf (HTTP oder Cache) des Nutzdatenkörpers empfangene Größe (in Oktetten) vor dem Entfernen aller angewendeten Inhaltskodierungen darstellt.

PerformanceResourceTiming.initiatorType Schreibgeschützt

Eine Zeichenfolge, die das Webplattform-Feature darstellt, das den Performance-Eintrag ausgelöst hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

Eine Zeichenfolge, die das Netzwerkprotokoll darstellt, das zum Abrufen der Ressource verwendet wird, identifiziert durch die ALPN-Protokoll-ID (RFC7301).

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

Eine Zeichenfolge, die den Status der Rendering-Blockierung darstellt. Entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Schreibgeschützt

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

PerformanceResourceTiming.transferSize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) der abgerufenen Ressource darstellt. Die Größe umfasst die Felder des Antwortheaders sowie den Nutzdatenkörper der Antwort.

PerformanceResourceTiming.serverTiming Schreibgeschützt

Ein Array von PerformanceServerTiming-Einträgen, das Server-Zeitmetriken enthält.

Instanzmethoden

PerformanceResourceTiming.toJSON()

Überschreibt die Methode PerformanceEntry.toJSON(), um eine JSON-Darstellung des PerformanceResourceTiming-Objekts zurückzugeben.

Beispiele

Protokollieren von Ressourcen-Zeitinformationen

Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, sobald diese in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers 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-Performance-Einträge anzeigt, 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

• Ressourcen-Timing (Übersicht)