PerformanceResourceTiming: responseEnd-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die responseEnd schreibgeschützte Eigenschaft gibt einen timestamp direkt nach dem Empfang des letzten Bytes der Ressource durch den Browser zurück oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.

Im Gegensatz zu vielen anderen PerformanceResourceTiming-Eigenschaften ist die responseEnd-Eigenschaft für Cross-Origin-Anfragen verfügbar, ohne dass der Timing-Allow-Origin HTTP-Antwort-Header benötigt wird.

Wert

Ein DOMHighResTimeStamp direkt nach dem Empfang des letzten Bytes der Ressource durch den Browser oder unmittelbar bevor die Transportverbindung geschlossen wird, je nachdem, was zuerst eintritt.

Beispiele

Messung der Zeit zum Abrufen (ohne Umleitungen)

Die Eigenschaften responseEnd und fetchStart können verwendet werden, um die Gesamtzeit zu messen, die zum Abrufen der endgültigen Ressource benötigt wurde (ohne Umleitungen). Wenn Sie Umleitungen einbeziehen möchten, wird die Gesamtzeit zum Abrufen in der duration-Eigenschaft bereitgestellt.

js
const timeToFetch = entry.responseEnd - entry.fetchStart;

Beispiel mit einem PerformanceObserver, der über neue resource-Performance-Einträge informiert, sobald sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge vor der Erstellung des Observers zuzugreifen.

js
const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    const timeToFetch = entry.responseEnd - entry.fetchStart;
    if (timeToFetch > 0) {
      console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Beispiel mit Performance.getEntriesByType(), das nur resource-Performance-Einträge zeigt, die in der Performance-Zeitleiste des Browsers vorhanden sind, wenn Sie diese Methode aufrufen:

js
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  const timeToFetch = entry.responseEnd - entry.fetchStart;
  if (timeToFetch > 0) {
    console.log(`${entry.name}: Time to fetch: ${timeToFetch}ms`);
  }
});

Spezifikationen

Specification
Resource Timing
# dom-performanceresourcetiming-responseend

Browser-Kompatibilität

BCD tables only load in the browser