PerformanceResourceTiming

Beschreibung

Die Eigenschaften des Interfaces erstellen eine Zeitachse für das Laden von Ressourcen mit hochauflösenden Zeitstempeln für Netzwerkevents wie Beginn und Ende von Umleitungen, Start des Abrufs, Start und Ende von DNS-Lookups, Start und Ende von Antworten und mehr. Zusätzlich erweitert das Interface PerformanceEntry um weitere Eigenschaften, die Daten über die Größe der abgerufenen Ressource sowie den Typ der Ressource, die den Abruf initiiert hat, bereitstellen.

Typische Metriken des Resource-Timings

Die Eigenschaften dieses Interfaces ermöglichen Ihnen die Berechnung bestimmter Metriken des Resource-Timings. Häufige Anwendungsfälle sind:

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

Verwalten von Ressourcenspeichergrößen

Standardmäßig werden nur 250 Resource-Timing-Einträge gepuffert. Weitere Informationen finden Sie in den Ressourcenspeichergrößen des Resource Timing-Leitfadens.

Cross-Origin-Timing-Informationen

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

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

Beispielsweise muss die Cross-Origin-Ressource, um https://developer.mozilla.org den Zugriff auf Resource-Timing-Informationen zu ermöglichen, Folgendes senden:

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

Instanzeigenschaften

Geerbt von PerformanceEntry

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften für Resource-Performance-Entry-Typen, indem es diese qualifiziert und einschränkt:

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

Zeitstempel

Das Interface unterstützt die folgenden 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 sofort nach dem Empfang des letzten Bytes der Antwort der letzten Umleitung.

PerformanceResourceTiming.workerStart Schreibgeschützt

Gibt einen DOMHighResTimeStamp sofort vor der Auslösung des FetchEvent zurück, wenn ein Service Worker-Thread bereits läuft, oder sofort bevor der Service Worker-Thread gestartet wird, wenn er noch nicht läuft. Wenn die Ressource nicht von einem Service Worker abgefangen wird, wird die Eigenschaft immer 0 zurückgeben.

PerformanceResourceTiming.fetchStart Schreibgeschützt

Ein DOMHighResTimeStamp sofort bevor der Browser beginnt, die Ressource abzurufen.

PerformanceResourceTiming.domainLookupStart Schreibgeschützt

Ein DOMHighResTimeStamp sofort bevor der Browser das Domain-Name-Lookup für die Ressource startet.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach Abschluss des Domain-Name-Lookups für die Ressource darstellt.

PerformanceResourceTiming.connectStart Schreibgeschützt

Ein DOMHighResTimeStamp sofort bevor der Browser die Verbindung zum Server herstellt, um die Ressource abzurufen.

PerformanceResourceTiming.secureConnectionStart Schreibgeschützt

Ein DOMHighResTimeStamp sofort bevor der Browser den Handshake-Prozess zur Sicherung der aktuellen Verbindung startet.

PerformanceResourceTiming.connectEnd Schreibgeschützt

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

PerformanceResourceTiming.requestStart Schreibgeschützt

Ein DOMHighResTimeStamp sofort bevor der Browser die Anforderung der Ressource vom Server startet.

PerformanceResourceTiming.firstInterimResponseStart Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zwischenantwortszeit 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 erhält (das möglicherweise eine Zwischenantwort ist).

PerformanceResourceTiming.finalResponseHeadersStart Schreibgeschützt

Ein DOMHighResTimeStamp, der die endgültige Antwortkopf-Zeit darstellt (zum Beispiel, 200 Erfolg), nach jeder Zwischenantwortszeit.

PerformanceResourceTiming.responseEnd Schreibgeschützt

Ein DOMHighResTimeStamp unmittelbar nachdem der Browser das letzte Byte der Ressource erhält oder direkt 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 Experimentell

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 Nachrichtenkörpers darstellt, der vom Abrufen (HTTP oder Cache) stammt, nachdem jede angewandte Inhaltscodierung entfernt wurde.

PerformanceResourceTiming.deliveryType Schreibgeschützt

Gibt an, wie die Ressource geliefert wurde – zum Beispiel aus dem Cache oder durch ein Navigations-Prefetch.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des Nutzlastkörpers darstellt, der vom Abrufen (HTTP oder Cache) stammt, bevor jede angewandte Inhaltscodierung entfernt wurde.

PerformanceResourceTiming.initiatorType Schreibgeschützt

Ein String, der das Webplattform-Feature darstellt, das den Performance-Eintrag initiiert hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

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

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 umfasst die Antwortkopfzeilenfelder plus den Antwortnutzlastkörper.

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

Instanzmethoden

PerformanceResourceTiming.toJSON()

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

Beispiele

Protokollierung von Resource-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 die resource-Performance-Einträge zeigt, 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 (Übersicht)