PerformanceResourceTiming

Beschreibung

Die Eigenschaften der Schnittstelle erstellen eine Ressourcenladezeitachse mit hochauflösenden Zeitstempeln für Netzwerkereignisse wie Start- und Endzeiten von Weiterleitungen, den Beginn des Abrufs, Start- und Endzeiten von DNS-Lookups, Start- und Endzeiten von Antworten und mehr. Darüber hinaus 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 Metriken für das Ressourcen-Timing

Mit den Eigenschaften dieser Schnittstelle können Sie bestimmte Ressourcen-Timing-Metriken berechnen. Häufige Anwendungsfälle sind:

• Messen der TCP-Handshake-Zeit (connectEnd - connectStart)
• Messen der DNS-Lookup-Zeit (domainLookupEnd - domainLookupStart)
• Messen der Weiterleitungszeit (redirectEnd - redirectStart)
• Messen der Zeit für Zwischenantwortanfragen (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 Inhalt komprimiert wurde (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 Größen des Ressourcenpuffers

Standardmäßig werden nur 250 Ressourcen-Timing-Einträge gepuffert. Weitere Informationen finden Sie unter Größen des Ressourcenpuffers im Leitfaden zu Resource Timing.

Timing-Informationen für Cross-Origin-Anfragen

Viele der Ressourcen-Timing-Eigenschaften sind darauf beschränkt, 0 oder eine leere Zeichenfolge zurückzugeben, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Timing-Informationen für Cross-Origin-Anfragen verfügbar zu machen, muss der HTTP-Antwort-Header Timing-Allow-Origin gesetzt werden.

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

Damit beispielsweise https://developer.mozilla.org Ressourcen-Timing-Informationen sehen darf, 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 für Ressourcen-Performance-Eintragstypen, indem sie wie folgt genauer definiert und eingeschränkt werden:

PerformanceEntry.duration Schreibgeschützt

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

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 der Abruf einer Ressource begonnen hat. Wenn keine HTTP-Weiterleitungen vorhanden sind oder deren Timing-Informationen nicht verfügbar gemacht werden, entspricht dieser Wert PerformanceResourceTiming.fetchStart. Andernfalls kann dieser Wert früher als fetchStart liegen.

Zeitstempel

Die Schnittstelle unterstützt die folgenden Zeitstempel-Eigenschaften, 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 in der Navigation auf der linken Seite angezeigt.

PerformanceResourceTiming.redirectStart Schreibgeschützt

Ein DOMHighResTimeStamp, der die Startzeit des Abrufs darstellt, der die Weiterleitung auslöst.

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, wenn bereits ein Service-Worker-Thread ausgeführt wird, oder unmittelbar vor dem Starten des Service-Worker-Threads, wenn er noch nicht ausgeführt wird. 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 mit dem Abrufen der Ressource beginnt. Wenn keine HTTP-Weiterleitungen vorhanden sind oder deren Timing-Informationen nicht verfügbar gemacht 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 mit dem Lookup des Domainnamens für die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach Abschluss des Domainnamen-Lookups für die Ressource durch den Browser 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 den Handshake-Prozess beginnt, um die aktuelle Verbindung abzusichern.

PerformanceResourceTiming.connectEnd Schreibgeschützt

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

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit einer Zwischenantwort 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 Zwischenantwort handeln kann.

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

Ein DOMHighResTimeStamp, der den Zeitpunkt der endgültigen Header-Antwort darstellt (beispielsweise 200 Success), nach einer etwaigen Zeit für Zwischenantworten.

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

Darüber hinaus 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.contentEncoding Schreibgeschützt

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

PerformanceResourceTiming.decodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des beim Abruf (HTTP oder Cache) empfangenen Nachrichtenrumpfs 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 Größe (in Oktetten) des beim Abruf (HTTP oder Cache) empfangenen Payload-Rumpfs 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, wie durch die ALPN Protocol ID (RFC7301) identifiziert.

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 HTTP-Antwortstatuscode darstellt, der beim Abrufen der Ressource zurückgegeben wurde.

PerformanceResourceTiming.transferSize Schreibgeschützt

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

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

Instanzmethoden

PerformanceResourceTiming.toJSON()

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

Beispiele

Protokollieren von Ressourcen-Timing-Informationen

Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge benachrichtigt, sobald sie in der Performance-Zeitachse 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-Zeitachse des Browsers vorhanden sind:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Resource Timing (Überblick)