PerformanceResourceTiming

Beschreibung

Die Eigenschaften des Interfaces erstellen eine Zeitachse fr das Laden von Ressourcen mit hochauflsenden Zeitstempeln fr Netzwerkereignisse wie Umleitungsstart- und endzeiten, Abrufstart, DNS-Lookup-Start- und endzeiten, Antwortstart- und endzeiten und mehr. Zustzlich erweitert das Interface PerformanceEntry mit weiteren Eigenschaften, die Daten ber die Gre der abgerufenen Ressource sowie den Typ der Ressource bereitstellen, die den Abruf initiiert hat.

Typische Ressourcenzahlungsmetriken

Die Eigenschaften dieses Interfaces ermglichen die Berechnung bestimmter Ressourcenzahlungsmetriken. Hufige Anwendungsflle beinhalten:

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

Verwaltung der Ressourcenspeichergren

Standardmig werden nur 250 Ressourcenzahlungseintrge gepuffert. Weitere Informationen finden Sie unter den Ressourcenspeichergren des Leitfadens zur Ressourcenzahlung.

Cross-Origin Zeitinformationen

Viele der Ressourcenzahlungseigenschaften sind darauf beschrnkt, 0 oder einen leeren String zurckzugeben, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Zeitinformationen offenzulegen, muss der Timing-Allow-Origin HTTP-Antwort-Header gesetzt werden.

Die Eigenschaften, die standardmig 0 zurckgeben, wenn eine Ressource von einem anderen Ursprung als dem der Webseite selbst geladen wird: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart, und responseStart.

Beispielsweise, um https://developer.mozilla.org Einsicht in Ressourcenzahlungsinformationen zu ermglichen, sollte die Cross-Origin-Ressource senden:

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

Instanzeigenschaften

Von PerformanceEntry geerbt

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften fr Ressourcenzahlungseintragstypen, indem es sie wie folgt qualifiziert und beschrnkt:

PerformanceEntry.duration Schreibgeschtzt

Gibt einen timestamp zurck, der der Unterschied zwischen den Eigenschaften responseEnd und startTime ist.

PerformanceEntry.entryType Schreibgeschtzt

Gibt "resource" zurck.

PerformanceEntry.name Schreibgeschtzt

Gibt die URL der Ressource zurck.

PerformanceEntry.startTime Schreibgeschtzt

Gibt den timestamp fr die Zeit zurck, zu der der Abruf einer Ressource gestartet wurde. Dieser Wert entspricht PerformanceResourceTiming.fetchStart.

Zeitstempel

Das Interface untersttzt folgende Zeitstempel-Eigenschaften, die Sie im Diagramm sehen knnen und die in der Reihenfolge aufgelistet sind, in der sie fr den Abruf einer Ressource aufgezeichnet werden. Eine alphabetische Auflistung finden Sie in der Navigation links.

[Zeitstempeldiagramm, das Zeitstempel in der Reihenfolge auffhrt, in der sie fr den Abruf einer Ressource aufgezeichnet werden]

PerformanceResourceTiming.redirectStart Schreibgeschtzt

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

PerformanceResourceTiming.redirectEnd Schreibgeschtzt

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

PerformanceResourceTiming.workerStart Schreibgeschtzt

Gibt einen DOMHighResTimeStamp unmittelbar vor dem Dispatchen des FetchEvent zurck, wenn ein Service Worker-Thread bereits luft, oder unmittelbar bevor der Service Worker-Thread gestartet wird, wenn er noch nicht luft. Wenn die Ressource nicht von einem Service Worker abgefangen wird, gibt die Eigenschaft immer 0 zurck.

PerformanceResourceTiming.fetchStart Schreibgeschtzt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser mit dem Abrufen der Ressource beginnt.

PerformanceResourceTiming.domainLookupStart Schreibgeschtzt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser mit der Suche nach dem Domainnamen fr die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschtzt

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach Abschluss der Domainnamensuche fr die Ressource darstellt.

PerformanceResourceTiming.connectStart Schreibgeschtzt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser die Verbindung zum Server zur Abrufung der Ressource herstellt.

PerformanceResourceTiming.secureConnectionStart Schreibgeschtzt

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

PerformanceResourceTiming.connectEnd Schreibgeschtzt

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

PerformanceResourceTiming.requestStart Schreibgeschtzt

Ein DOMHighResTimeStamp unmittelbar bevor der Browser die Ressource vom Server anfordert.

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschtzt

Ein DOMHighResTimeStamp, der die Zwischenantwortzeit darstellt (zum Beispiel 100 Weiterlesen oder 103 Frhe Hinweise).

PerformanceResourceTiming.responseStart Schreibgeschtzt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das erste Byte der Antwort vom Server erhlt (welches eine Zwischenantwort sein kann).

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschtzt

Ein DOMHighResTimeStamp, der die endgltige Antwortkopfzeits darstellt (zum Beispiel 200 Erfolg), nach einer Zwischenantwortszeit.

PerformanceResourceTiming.responseEnd Schreibgeschtzt

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

Zustzliche Ressourceninformationen

Zustzlich legt dieses Interface die folgenden Eigenschaften offen, die weitere Informationen ber eine Ressource enthalten:

PerformanceResourceTiming.contentType Schreibgeschtzt

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

PerformanceResourceTiming.decodedBodySize Schreibgeschtzt

Eine Zahl, die die Gre (in Oktetten) des abgerufenen Nachrichtenkrpers (HTTP oder Cache) nach Entfernung jeglicher angewendeter Inhaltskodierung darstellt.

PerformanceResourceTiming.deliveryType Schreibgeschtzt

Gibt an, wie die Ressource hergestellt wurde zum Beispiel aus dem Cache oder durch eine navigationsgefhrte Vorabrufung.

PerformanceResourceTiming.encodedBodySize Schreibgeschtzt

Eine Zahl, die die Gre (in Oktetten) des abgerufenen Nutzlastkrpers (HTTP oder Cache) darstellt, vor Entfernung jeglicher angewendeter Inhaltskodierungen.

PerformanceResourceTiming.initiatorType Schreibgeschtzt

Ein String, der die Webplattform-Funktion darstellt, die den Leistungs-Eintrag initiiert hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschtzt

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

PerformanceResourceTiming.renderBlockingStatus Schreibgeschtzt

Ein String, der den Status des Blockierens der Darstellung darstellt. Entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Schreibgeschtzt

Eine Zahl, die den HTTP-Antwortstatuscode darstellt, der beim Abrufen der Ressource zurckgegeben wird.

PerformanceResourceTiming.transferSize Schreibgeschtzt

Eine Zahl, die die Gre (in Oktetten) der abgerufenen Ressource darstellt. Die Gre umfasst die Antwortkopfzeilen plus den Antwortnutzlastkrper.

PerformanceResourceTiming.serverTiming Schreibgeschtzt

Ein Array von PerformanceServerTiming-Eintrgen, die Server-Leistungsmesswerte enthalten.

Instanzmethoden

PerformanceResourceTiming.toJSON()

Gibt eine JSON-Darstellung des PerformanceResourceTiming Objekts zurck.

Beispiele

Protokollieren von Ressourcenzahlungsinformationen

Beispiel unter Verwendung eines PerformanceObserver, der ber neue resource Leistungs-Eintrge informiert, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die buffered Option, um auf Eintrge zuzugreifen, die vor der Beobachtererstellung erfolgen.

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 Leistungs-Eintrge zeigt, die zum Zeitpunkt des Aufrufs der Methode in der Leistungstimeline des Browsers vorhanden sind:

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Ressourcenzahlung (bersicht)