PerformanceResourceTiming

Beschreibung

Die Eigenschaften des Interfaces erstellen eine Zeitachse für das Laden von Ressourcen mit hochauflösenden Zeitstempeln für Netzwerkereignisse wie Umleitungsstart- und endzeiten, Abrufstart, DNS-Lookup-Start- und endzeiten, Antwortstart- und endzeiten und mehr. Zusätzlich erweitert das Interface PerformanceEntry mit weiteren Eigenschaften, die Daten über die Größe der abgerufenen Ressource sowie den Typ der Ressource bereitstellen, die den Abruf initiiert hat.

Typische Ressourcenzahlungsmetriken

Die Eigenschaften dieses Interfaces ermöglichen die Berechnung bestimmter Ressourcenzahlungsmetriken. Häufige Anwendungsfälle 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)
• Ü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 blockierend sind (renderBlockingStatus)

Verwaltung der Ressourcenspeichergrößen

Standardmäßig werden nur 250 Ressourcenzahlungseinträge gepuffert. Weitere Informationen finden Sie unter den Ressourcenspeichergrößen des Leitfadens zur Ressourcenzahlung.

Cross-Origin Zeitinformationen

Viele der Ressourcenzahlungseigenschaften sind darauf beschränkt, 0 oder einen leeren String zurückzugeben, 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 standardmäßig 0 zurückgeben, 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 ermöglichen, sollte die Cross-Origin-Ressource senden:

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

Instanzeigenschaften

Von PerformanceEntry geerbt

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften für Ressourcenzahlungseintragstypen, indem es sie wie folgt qualifiziert und beschränkt:

PerformanceEntry.duration Schreibgeschützt

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

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 die Zeit zurück, zu der der Abruf einer Ressource gestartet wurde. Dieser Wert entspricht PerformanceResourceTiming.fetchStart.

Zeitstempel

Das Interface unterstützt folgende Zeitstempel-Eigenschaften, die Sie im Diagramm sehen können und die in der Reihenfolge aufgelistet sind, in der sie für den Abruf einer Ressource aufgezeichnet werden. Eine alphabetische Auflistung finden Sie in der Navigation links.

PerformanceResourceTiming.redirectStart Schreibgeschützt

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

PerformanceResourceTiming.redirectEnd Schreibgeschützt

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

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp unmittelbar vor dem Dispatchen 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 mit dem Abrufen der Ressource beginnt.

PerformanceResourceTiming.domainLookupStart Schreibgeschützt

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

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach Abschluss der Domainnamensuche für die Ressource darstellt.

PerformanceResourceTiming.connectStart Schreibgeschützt

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

PerformanceResourceTiming.secureConnectionStart Schreibgeschützt

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

PerformanceResourceTiming.connectEnd Schreibgeschützt

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

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

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

PerformanceResourceTiming.responseStart Schreibgeschützt

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

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

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

PerformanceResourceTiming.responseEnd Schreibgeschützt

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

Zusätzliche Ressourceninformationen

Zusätzlich legt dieses Interface die folgenden Eigenschaften offen, die weitere Informationen über eine Ressource enthalten:

PerformanceResourceTiming.contentType Schreibgeschützt

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) des abgerufenen Nachrichtenkörpers (HTTP oder Cache) nach Entfernung jeglicher angewendeter Inhaltskodierung darstellt.

PerformanceResourceTiming.deliveryType Schreibgeschützt

Gibt an, wie die Ressource hergestellt wurde – zum Beispiel aus dem Cache oder durch eine navigationsgeführte Vorabrufung.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des abgerufenen Nutzlastkörpers (HTTP oder Cache) darstellt, vor Entfernung jeglicher angewendeter Inhaltskodierungen.

PerformanceResourceTiming.initiatorType Schreibgeschützt

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

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

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

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

Ein String, der den Status des Blockierens der Darstellung 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 Antwortkopfzeilen plus den Antwortnutzlastkörper.

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

Instanzmethoden

PerformanceResourceTiming.toJSON()

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

Beispiele

Protokollieren von Ressourcenzahlungsinformationen

Beispiel unter Verwendung eines PerformanceObserver, der über neue resource Leistungs-Einträge informiert, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die buffered Option, um auf Einträge 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-Einträge 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-Kompatibilität

Siehe auch

• Ressourcenzahlung (Übersicht)