PerformanceResourceTiming: fetchStart-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: Diese Funktion ist in Web Workers verfügbar.

Die schreibgeschützte Eigenschaft fetchStart stellt einen Zeitstempel dar, der unmittelbar bevor der Browser beginnt, die Ressource abzurufen, gesetzt wird.

Wenn es HTTP-Weiterleitungen gibt, gibt die Eigenschaft die Zeit unmittelbar bevor der Benutzeragent beginnt, die endgültige Ressource in der Weiterleitung abzurufen, zurück.

Im Gegensatz zu vielen anderen PerformanceResourceTiming-Eigenschaften ist die fetchStart-Eigenschaft für Cross-Origin-Anfragen ohne das Timing-Allow-Origin HTTP-Antwort-Header verfügbar.

Wert

Ein DOMHighResTimeStamp, der unmittelbar bevor der Browser beginnt, die Ressource abzurufen, gesetzt wird.

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

const timeToFetch = entry.responseEnd - entry.fetchStart;

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

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 unter Verwendung von Performance.getEntriesByType(), das nur resource-Performance-Einträge zeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

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-fetchstart

Browser-Kompatibilität

BCD tables only load in the browser