PerformanceTiming.fetchStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceTiming.fetchStart

Beschreibung

PerformanceTiming.fetchStart liefert einen Zeitstempel (Millisekunden seit dem 1. Januar 1970, UTC). Er markiert den Moment, in dem der Browser bereit ist, das Dokument über HTTP abzurufen. Das passiert bevor der Anwendungscache bzw. HTTP-Cache geprüft wird und bevor DNS-Auflösung oder TCP-Verbindungsaufbau beginnen.

Im Ablauf der Navigation Timing API kommt fetchStart nach redirectEnd (bei Weiterleitungen) bzw. nach navigationStart und vor domainLookupStart. Aus der Differenz zu späteren Zeitstempeln lassen sich zum Beispiel die Wartezeit bis zum ersten Byte (responseStart - fetchStart) oder die Gesamtladezeit (loadEventEnd - fetchStart) berechnen.

Zugreifen kann man darauf über performance.timing.fetchStart. Die Eigenschaft ist veraltet. Für neuen Code solltest du stattdessen PerformanceNavigationTiming.fetchStart nutzen, das über performance.getEntriesByType("navigation") erreichbar ist. Dort ist der Wert ein hochauflösender DOMHighResTimeStamp, relativ zu performance.timeOrigin.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Zeitstempel (unsigned long long) in Millisekunden seit der UNIX-Epoche. Das ist der Moment, in dem der Browser bereit war, das Dokument abzurufen.

Beispiele

Rohwert auslesen

const { fetchStart } = performance.timing;
console.log(fetchStart);
console.log(new Date(fetchStart).toISOString());

1717401234567 2024-06-03T08:33:54.567Z

Zeit bis zum ersten Byte und Gesamtladezeit messen

window.addEventListener('load', () => {
  // loadEventEnd ist erst nach dem load-Handler gesetzt
  setTimeout(() => {
    const t = performance.timing;
    const ttfb = t.responseStart - t.fetchStart;
    const total = t.loadEventEnd - t.fetchStart;
    const cacheUndDns = t.domainLookupStart - t.fetchStart;
    console.log(`Cache-Prüfung: ${cacheUndDns} ms`);
    console.log(`TTFB: ${ttfb} ms`);
    console.log(`Gesamt: ${total} ms`);
  }, 0);
});

Cache-Prüfung: 2 ms TTFB: 118 ms Gesamt: 842 ms

Moderne Alternative mit Fallback

const getFetchStart = () => {
  const [nav] = performance.getEntriesByType('navigation');
  if (nav) {
    // relativ zu timeOrigin, hochauflösend
    return performance.timeOrigin + nav.fetchStart;
  }
  // Fallback für sehr alte Browser
  return performance.timing.fetchStart;
};

console.log(Math.round(getFetchStart()));

1717401234567

// Wichtig · Fallstricke

Veraltet: PerformanceTiming ist Teil von Navigation Timing Level 1 und wurde durch PerformanceNavigationTiming (Level 2) ersetzt. Browser unterstützen die Eigenschaft noch, sie kann aber künftig entfernt werden.
Unterschiedliche Zeitbasis: performance.timing.fetchStart ist ein absoluter Epoch-Wert in ganzen Millisekunden. PerformanceNavigationTiming.fetchStart ist dagegen relativ zu performance.timeOrigin und hat Nachkommastellen. Mische beide Werte nicht ohne Umrechnung.
Bei Seiten aus dem Cache liegen fetchStart, domainLookupStart und connectStart oft sehr nahe beieinander oder sind gleich. Das ist korrekt und kein Messfehler.
Der Wert bezieht sich nur auf das Hauptdokument. Für Unterressourcen wie Bilder oder Skripte verwendest du PerformanceResourceTiming.fetchStart.
Wegen Datenschutz-Maßnahmen gegen Timing-Angriffe runden oder verrauschen manche Browser die Zeitwerte (z. B. Firefox mit privacy.resistFingerprinting).

Siehe auch

PerformanceNavigation.type PerformanceTiming.connectStart PerformanceTiming.redirectStart PerformanceTiming.requestStart PerformanceTiming.responseStart