PerformanceTiming.loadEventEnd — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceTiming.loadEventEnd

Beschreibung

performance.timing.loadEventEnd gehört zur alten Navigation-Timing-API (Level 1). Der Wert ist ein unsigned long long, also eine Ganzzahl in Millisekunden seit der UNIX-Epoche. Er gibt an, wann der load-Ereignishandler des aktuellen Dokuments durchgelaufen ist. Der Zeitpunkt ist damit das letzte Ereignis im Lade-Lebenszyklus einer Seite.

Solange das load-Ereignis noch nicht ausgelöst wurde oder noch läuft, ist der Wert 0. Deshalb liest man ihn erst nach dem Abschluss des load-Handlers aus, typischerweise mit setTimeout(…, 0) innerhalb eines load-Listeners.

Früher war loadEventEnd - navigationStart die übliche Formel für die komplette Seitenladezeit. In neuem Code solltest du stattdessen PerformanceNavigationTiming.loadEventEnd verwenden, das du über performance.getEntriesByType("navigation") bekommst. Dieser Wert ist ein hochauflösender DOMHighResTimeStamp, der relativ zu performance.timeOrigin gemessen wird.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Zeitstempel (unsigned long long) in Millisekunden seit der UNIX-Epoche. Ist 0, solange der load-Handler noch nicht fertig ist.

Beispiele

Gesamte Ladezeit der Seite messen (alte API)

window.addEventListener('load', () => {
  // Erst nach dem load-Handler auslesen, sonst ist der Wert 0
  setTimeout(() => {
    const t = performance.timing;
    const ladezeit = t.loadEventEnd - t.navigationStart;
    console.log(`Seite vollständig geladen in ${ladezeit} ms`);
  }, 0);
});

Seite vollständig geladen in 1234 ms

Fallstrick: Auslesen direkt im load-Handler

window.addEventListener('load', () => {
  // Der Handler läuft noch, deshalb ist loadEventEnd noch nicht gesetzt
  console.log(performance.timing.loadEventEnd);
});

Moderne Alternative mit Fallback

const getLoadDuration = () => {
  const [nav] = performance.getEntriesByType('navigation');
  if (nav && nav.loadEventEnd > 0) {
    // Hochauflösend, relativ zu performance.timeOrigin
    return nav.loadEventEnd;
  }
  // Fallback auf die veraltete API
  const t = performance.timing;
  return t.loadEventEnd ? t.loadEventEnd - t.navigationStart : null;
};

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

Ladezeit: 1187.4 ms

Dauer des load-Handlers berechnen

window.addEventListener('load', () => {
  setTimeout(() => {
    const { loadEventStart, loadEventEnd } = performance.timing;
    console.log(`load-Handler dauerte ${loadEventEnd - loadEventStart} ms`);
  }, 0);
});

load-Handler dauerte 3 ms

// Wichtig · Fallstricke

Veraltet: PerformanceTiming ist aus der Spezifikation entfernt worden. Nimm stattdessen PerformanceNavigationTiming. Die meisten Browser unterstützen die alte API noch, aber das kann sich jederzeit ändern.
Wert 0: Wenn du die Eigenschaft ausliest, bevor der load-Handler fertig ist, bekommst du 0. Die Differenz zu navigationStart wird dann negativ und damit sinnlos.
Anderer Bezugspunkt: Die alte API liefert absolute Epochenzeit in ganzen Millisekunden. Die neue API liefert relative, hochauflösende Werte. Mische die beiden nicht in einer Rechnung.
Browser können die Zeitauflösung aus Datenschutzgründen vergröbern, um Timing-Angriffe und Fingerprinting zu erschweren.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert.

Siehe auch

PerformanceEventTiming.processingEnd PerformanceTiming.unloadEventEnd PerformanceTiming.loadEventStart PerformanceTiming.connectEnd PerformanceTiming.redirectEnd