PerformanceResourceTiming

Die Eigenschaften des Interfaces erstellen eine Zeitleiste für das Laden von Ressourcen mit hochauflösenden Zeitstempeln für Netzwerkevents wie Umleitungsstart und -ende, Abrufstart, DNS-Lookup-Start und -ende, Antwortstart und -ende 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 bereitstellen, die den Abruf ausgelöst hat.

Die Eigenschaften dieses Interfaces ermöglichen die Berechnung bestimmter Ressourcen-Zeitmesswerte. 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 Zwischenantwortzeit (firstInterimResponseStart - finalResponseHeadersStart)
• Messen der Anforderungszeit (responseStart - requestStart)
• Messen der TLS-Verhandlungszeit (requestStart - secureConnectionStart)
• Messen der Zeit für den Abruf (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)

Dieses Interface erweitert die folgenden PerformanceEntry-Eigenschaften für Ressourcenleistungsentry-Typen, indem sie qualifiziert und eingeschränkt werden wie folgt:

PerformanceEntry.duration Schreibgeschützt

Gibt einen timestamp zurück, der 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 die Zeit zurück, zu der ein Ressourcenabruf gestartet wurde. Dieser Wert entspricht PerformanceResourceTiming.fetchStart.

Das Interface unterstützt die folgenden Zeitstempel-Eigenschaften, die im Diagramm zu sehen sind und in der Reihenfolge aufgelistet sind, in der sie für das Abrufen einer Ressource aufgezeichnet werden. Eine alphabetische Liste 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 der Entsendung 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 diese 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 Domain-Namen-Suche für die Ressource beginnt.

PerformanceResourceTiming.domainLookupEnd Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit unmittelbar nach dem Abschluss der Domain-Namen-Suche 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 mit dem Handshake-Prozess beginnt, um die aktuelle Verbindung zu sichern.

PerformanceResourceTiming.connectEnd Schreibgeschützt

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

PerformanceResourceTiming.requestStart Schreibgeschützt

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

PerformanceResourceTiming.firstInterimResponseStart Experimentell Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zwischenantwortzeit darstellt (z. B. 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 (was eine Zwischenantwort sein kann).

PerformanceResourceTiming.finalResponseHeadersStart Experimentell Schreibgeschützt

Ein DOMHighResTimeStamp, der die Zeit für den Empfang der letzten Antwortheader darstellt (z. B. 200 Success), nach einer eventuellen Zwischenantwortzeit.

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, welcher Zeitpunkt früher ist.

Zusätzlich bietet dieses Interface die folgenden Eigenschaften, die mehr Informationen über eine Ressource enthalten:

PerformanceResourceTiming.contentType Schreibgeschützt Experimentell

Ein Zeichenfolgetyp, 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 Abruf (HTTP oder Cache) empfangenen Nachrichteninhalts nach dem Entfernen jeglicher angewendeter Inhaltskodierung angibt.

PerformanceResourceTiming.deliveryType Experimentell Schreibgeschützt

Gibt an, wie die Ressource bereitgestellt wurde — beispielsweise aus dem Cache oder durch eine Navigationsvorabruf.

PerformanceResourceTiming.encodedBodySize Schreibgeschützt

Eine Zahl, die die Größe (in Oktetten) des vom Abruf (HTTP oder Cache) empfangenen Nutzlastkörpers angibt, bevor jegliche angewendete Inhaltskodierung entfernt wird.

PerformanceResourceTiming.initiatorType Schreibgeschützt

Eine Zeichenfolge, die das Webplattform-Feature darstellt, das den Leistungseintrag initiiert hat.

PerformanceResourceTiming.nextHopProtocol Schreibgeschützt

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

PerformanceResourceTiming.renderBlockingStatus Schreibgeschützt

Eine Zeichenfolge, die den Render-Blockierungsstatus darstellt. Entweder "blocking" oder "non-blocking".

PerformanceResourceTiming.responseStatus Schreibgeschützt

Eine Zahl, die den HTTP-Antwortstatuscode angibt, 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 Antwortheaderfelder plus den Nutzlastkörper der Antwort.

PerformanceResourceTiming.serverTiming Schreibgeschützt

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

PerformanceResourceTiming.toJSON()

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

Beispiel mit einem PerformanceObserver, der über neue resource-Leistungseinträge informiert, sobald sie in der Leistungstimeline des Browsers erfasst werden. Verwenden Sie die buffered-Option, um auf Einträge von 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-Leistungseinträge anzeigt, die im Leistungstimeline des Browsers vorhanden sind, zu dem Zeitpunkt, zu dem Sie diese Methode aufrufen:

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

Viele der Ressourcen-Zeitmessungseigenschaften sind eingeschränkt und geben 0 oder eine leere Zeichenfolge zurück, wenn es sich um eine Cross-Origin-Anfrage handelt. Um zeitliche Informationen über Cross-Origin hinweg freizugeben, muss der HTTP-Antwortheader Timing-Allow-Origin gesetzt werden.

Um beispielsweise https://developer.mozilla.org den Zugriff auf Ressourcenzeitinformationen zu ermöglichen, sollte die Cross-Origin-Ressource senden:

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

• Ressourcentiming (Überblick)