PerformanceResourceTiming

Beschreibung

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

Typische Ressourcentiming-Metriken

Die Eigenschaften dieses Interfaces erlauben es Ihnen, bestimmte Ressourcentiming-Metriken zu berechnen. Häufige Anwendungsfälle beinhalten:

• Messung der TCP-Handshake-Zeit (connectEnd - connectStart)
• Messung der DNS-Suchzeit (domainLookupEnd - domainLookupStart)
• Messung der Umleitungszeit (redirectEnd - redirectStart)
• Messung der Zwischenanfragezeit (firstInterimResponseStart - finalResponseHeadersStart)
• Messung der Anfragezeit (responseStart - requestStart)
• Messung der Dokumentanforderungszeit (finalResponseHeadersStart - requestStart)
• Messung der TLS-Verhandlungszeit (requestStart - secureConnectionStart)
• Messung der Abrufzeit (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 render-blockierend sind (renderBlockingStatus)

Verwaltung von Ressourcenspeicherpuffergrößen

Standardmäßig werden nur 250 Ressourcentiming-Einträge gepuffert. Für weitere Informationen sehen Sie sich die Ressourcenpuffergrößen des Ressourcentiming-Leitfadens an.

Cross-Origin-Timing-Informationen

Viele der Ressourcentiming-Eigenschaften sind eingeschränkt und geben 0 oder einen leeren String zurück, wenn die Ressource eine Cross-Origin-Anfrage ist. Um Cross-Origin-Timing-Informationen freizugeben, muss der HTTP-Antwortheader Timing-Allow-Origin gesetzt werden.

Die Eigenschaften, die standardmäßig als 0 zurückgegeben werden, wenn eine Ressource von einem anderen Ursprung als derjenigen der Webseite selbst geladen wird: redirectStart, redirectEnd, domainLookupStart, domainLookupEnd, connectStart, connectEnd, secureConnectionStart, requestStart und responseStart.

Um beispielsweise https://developer.mozilla.org zu erlauben, Ressourcentiming-Informationen zu sehen, sollte die Cross-Origin-Ressource senden:

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

Instanzeigenschaften

Geerbt von PerformanceEntry

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften für Ressourcenleistungseintragtypen, indem sie wie folgt qualifiziert und eingegrenzt werden:

PerformanceEntry.duration Schreibgeschützt

Gibt ein timestamp zurück, das die Differenz 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 den Zeitpunkt zurück, zu dem das Abrufen einer Ressource begonnen hat. Dieser Wert entspricht PerformanceResourceTiming.fetchStart.

Zeitstempel

Das Interface unterstützt die folgenden Zeitstempel-Eigenschaften, die Sie im Diagramm sehen und die in der Reihenfolge aufgelistet sind, in der sie für das Abrufen einer Ressource aufgezeichnet werden. Eine alphabetische Auflistung wird in der Navigation links angezeigt.

PerformanceResourceTiming.redirectStart Schreibgeschützt

Ein DOMHighResTimeStamp, das die Startzeit des Abrufs darstellt, der die Weiterleitung initiiert.

PerformanceResourceTiming.redirectEnd Schreibgeschützt

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

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt ein DOMHighResTimeStamp unmittelbar vor dem Dispatch 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 mit der DNS-Suche nach der Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp darstellt die Zeit unmittelbar nach Abschluss der DNS-Suche nach der Ressource.

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 zu sichern.

PerformanceResourceTiming.connectEnd Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nach Abschluss der Verbindung zum Server, um die Ressource abzurufen.

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

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

PerformanceResourceTiming.responseStart Schreibgeschützt

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

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

Ein DOMHighResTimeStamp, das die endgültige Header-Antwortzeit darstellt (zum Beispiel 200 Success), nach der Zeit der Zwischenantwort.

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 bietet dieses Interface die folgenden Eigenschaften, 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 vom Abrufen (HTTP oder Cache) des Nachrichtenkörpers erhaltenen, nach dem Entfernen aller angewendeten Inhaltskodierungen, darstellt.

PerformanceResourceTiming.deliveryType Schreibgeschützt

Zeigt an, wie die Ressource geliefert wurde — zum Beispiel aus dem Cache oder durch ein navigationales Prefetch.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des vom Abrufen (HTTP oder Cache) erhaltenen Nutzdatenkörpers vor dem Entfernen angewendeter Inhaltskodierungen darstellt.

PerformanceResourceTiming.initiatorType Schreibgeschützt

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

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

Ein String, der das Netzwerkprotokoll beschreibt, das zum Abrufen der Ressource verwendet wurde, wie es durch die ALPN Protocol ID (RFC7301) identifiziert wird.

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

Ein String, der den Status der Render-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 schließt die Antwortkopfzeilenfelder sowie den Antwortnutzkörper ein.

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

Instanzmethoden

PerformanceResourceTiming.toJSON()

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

Beispiele

Protokollierung von Ressourcentiming-Informationen

Beispiel mit einem PerformanceObserver, der neue resource-Leistungseinträge benachrichtigt, sobald sie in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge zuzugreifen, die vor der Erstellung des Observers entstanden sind.

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-Leistungseinträge anzeigt, die zum Zeitpunkt des Aufrufs dieser 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

• Ressourcentiming (Übersicht)