PerformanceResourceTiming.fetchStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceResourceTiming.fetchStart

Beschreibung

Die schreibgeschützte Eigenschaft fetchStart eines PerformanceResourceTiming-Eintrags enthält den Zeitpunkt in Millisekunden (relativ zu performance.timeOrigin), direkt bevor der Browser mit dem Abruf der Ressource beginnt – also noch vor einer eventuellen Cache-Prüfung, DNS-Auflösung und dem Verbindungsaufbau.

Gibt es eine HTTP-Weiterleitung, entspricht fetchStart dem Zeitpunkt, an dem der Abruf der letzten (weitergeleiteten) Anfrage beginnt. Ohne Weiterleitung ist der Wert in der Regel identisch mit startTime. Die Differenz fetchStart - startTime zeigt somit ungefähr die für Weiterleitungen verbrauchte Zeit.

In der Praxis dient fetchStart als Bezugspunkt für Teilmessungen: domainLookupStart - fetchStart ergibt z. B. die Zeit für Cache-Prüfung (App-Cache/Service Worker), responseEnd - fetchStart die Gesamtdauer des eigentlichen Abrufs ohne Weiterleitungen. Die Werte liest man über performance.getEntriesByType("resource") oder einen PerformanceObserver aus.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitstempel in Millisekunden (mit Nachkommastellen) relativ zu performance.timeOrigin, unmittelbar bevor der Abruf der Ressource beginnt.

Beispiele

fetchStart aller geladenen Ressourcen ausgeben

const entries = performance.getEntriesByType("resource");

for (const entry of entries) {
  console.log(`${entry.name}: fetchStart = ${entry.fetchStart.toFixed(1)} ms`);
}

https://example.com/app.js: fetchStart = 112.4 ms https://example.com/style.css: fetchStart = 115.9 ms

Abrufdauer ohne Weiterleitungen per PerformanceObserver messen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const fetchDuration = entry.responseEnd - entry.fetchStart;
    const redirectTime = entry.fetchStart - entry.startTime;
    console.log(entry.name, {
      abruf: `${fetchDuration.toFixed(1)} ms`,
      weiterleitung: `${redirectTime.toFixed(1)} ms`
    });
  }
});

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

https://example.com/logo.png { abruf: '38.2 ms', weiterleitung: '0.0 ms' }

Zeit für Cache-/Service-Worker-Prüfung vor DNS ermitteln

const [entry] = performance.getEntriesByName("https://example.com/api/data.json");

if (entry) {
  const cacheCheck = entry.domainLookupStart - entry.fetchStart;
  console.log(`Vor DNS-Lookup vergangen: ${cacheCheck.toFixed(2)} ms`);
  // transferSize 0 deutet auf Auslieferung aus dem Cache hin
  console.log("Aus Cache:", entry.transferSize === 0 && entry.decodedBodySize > 0);
}

Vor DNS-Lookup vergangen: 1.35 ms Aus Cache: false

// Wichtig · Fallstricke

Cross-Origin-Ressourcen: fetchStart ist auch ohne Timing-Allow-Origin-Header verfügbar, viele andere Detailwerte (z. B. domainLookupStart, connectStart, requestStart) sind dann aber 0. Differenzen wie domainLookupStart - fetchStart werden so negativ – vorher auf 0 prüfen.
Bei Weiterleitungen ist fetchStart größer als startTime; für die Gesamtladezeit inklusive Weiterleitungen duration bzw. responseEnd - startTime verwenden.
Der Ressourcen-Puffer ist standardmäßig begrenzt (oft 250 Einträge). Mit performance.setResourceTimingBufferSize() vergrößern oder einen PerformanceObserver nutzen.
Zeitwerte können aus Sicherheitsgründen (Spectre-Schutz) gerundet sein, typischerweise auf 0,1 ms bzw. ohne Cross-Origin-Isolation auf gröbere Werte.
In allen modernen Browsern sowie in Web Workern und Node.js (perf_hooks) verfügbar.

Siehe auch

PerformanceResourceTiming.connectStart PerformanceResourceTiming.redirectStart PerformanceResourceTiming.requestStart PerformanceResourceTiming.workerStart PerformanceResourceTiming.responseStart