PerformanceTiming.navigationStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceTiming.navigationStart

Beschreibung

Die Eigenschaft performance.timing.navigationStart liefert eine Ganzzahl (unsigned long long), die den Zeitpunkt in Millisekunden seit der UNIX-Epoche angibt, direkt nachdem der Browser die Aufforderung zum Entladen (unload) des vorherigen Dokuments im selben Browsing-Kontext abgeschlossen hat. Gibt es kein vorheriges Dokument, entspricht der Wert fetchStart.

Traditionell diente navigationStart als Nullpunkt aller Ladezeit-Messungen: Zieht man den Wert von anderen PerformanceTiming-Eigenschaften ab (z. B. loadEventEnd - navigationStart), erhält man die Dauer der jeweiligen Phase seit Beginn der Navigation.

Die gesamte Schnittstelle PerformanceTiming ist veraltet. In neuem Code sollte man die Navigation Timing Level 2 API verwenden: performance.getEntriesByType("navigation")[0] liefert ein PerformanceNavigationTiming-Objekt, dessen Werte bereits relativ zu performance.timeOrigin sind. Dort entspricht der Beginn der Navigation dem Wert startTime (immer 0).

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Zeitstempel in Millisekunden seit dem 1. Januar 1970 (UTC), vergleichbar mit Date.now().

Beispiele

Gesamte Ladezeit der Seite messen (veraltete API)

window.addEventListener("load", () => {
  // loadEventEnd ist erst nach Abschluss des load-Handlers gesetzt
  setTimeout(() => {
    const t = performance.timing;
    const ladezeit = t.loadEventEnd - t.navigationStart;
    console.log(`Seite geladen in ${ladezeit} ms`);
  }, 0);
});

Seite geladen in 842 ms

Zeitpunkt des Navigationsbeginns als Datum ausgeben

const start = performance.timing.navigationStart;
console.log(new Date(start).toISOString());
console.log(`Seit Navigationsbeginn vergangen: ${Date.now() - start} ms`);

2024-05-14T09:31:02.417Z Seit Navigationsbeginn vergangen: 1530 ms

Moderne Alternative mit Fallback

const ladezeitErmitteln = () => {
  const [nav] = performance.getEntriesByType("navigation");
  if (nav) {
    // Werte sind relativ zu performance.timeOrigin (startTime = 0)
    return Math.round(nav.loadEventEnd - nav.startTime);
  }
  // Fallback für sehr alte Browser
  const t = performance.timing;
  return t.loadEventEnd - t.navigationStart;
};

window.addEventListener("load", () => {
  setTimeout(() => console.log(`Ladezeit: ${ladezeitErmitteln()} ms`), 0);
});

Ladezeit: 838 ms

Absoluten Zeitstempel in relative Zeit umrechnen

// timeOrigin entspricht in etwa navigationStart, aber mit Sub-Millisekunden-Genauigkeit
const differenz = performance.timeOrigin - performance.timing.navigationStart;
console.log(`Abweichung: ${differenz.toFixed(3)} ms`);

Abweichung: 0.214 ms

// Wichtig · Fallstricke

Veraltet: PerformanceTiming gehört zu Navigation Timing Level 1 und wurde durch PerformanceNavigationTiming ersetzt. Browser unterstützen die Eigenschaft noch aus Kompatibilitätsgründen, sie kann aber künftig entfernt werden.
Absolute Epochenzeit: Anders als performance.now() ist der Wert kein relativer, hochauflösender Zeitstempel, sondern ganzzahlige Millisekunden seit 1970. Er hängt von der Systemuhr ab und kann durch Uhrzeitkorrekturen verfälscht werden.
Zeitpunkt beachten: Andere Eigenschaften wie loadEventEnd sind 0, solange das Ereignis noch nicht eingetreten ist – Differenzen wären dann negativ. Messungen daher erst nach dem load-Ereignis (z. B. per setTimeout) durchführen.
In Web Workern ist performance.timing nicht verfügbar.
Bei Weiterleitungen und Wiederherstellung aus dem Back/Forward-Cache können die Werte unerwartet ausfallen; PerformanceNavigationTiming bietet hierfür präzisere Angaben (z. B. redirectCount, type).

Siehe auch

Performance.now() PerformanceTiming.connectStart PerformanceTiming.fetchStart PerformanceTiming.redirectStart PerformanceTiming.requestStart