PerformanceNavigationTiming.loadEventEnd — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.loadEventEnd

Beschreibung

Die Eigenschaft loadEventEnd einer PerformanceNavigationTiming-Instanz liefert einen hochauflösenden Zeitstempel in Millisekunden. Er gibt an, wann alle für das load-Ereignis des Fensters registrierten Handler fertig ausgeführt wurden. Der Wert ist relativ zu startTime der Navigation (in der Regel 0, also dem timeOrigin).

Damit ist loadEventEnd der letzte Messpunkt im Navigations-Timing und markiert das Ende des gesamten Seitenladevorgangs. Die Differenz loadEventEnd - loadEventStart zeigt, wie viel Zeit Ihre eigenen load-Handler verbrauchen; loadEventEnd - startTime (entspricht duration) ergibt die Gesamtladezeit der Seite.

Solange das load-Ereignis noch nicht abgeschlossen ist, beträgt der Wert 0. Lesen Sie ihn daher erst aus, nachdem das Ereignis vollständig durchlaufen ist – etwa per PerformanceObserver oder mit einem setTimeout innerhalb des load-Handlers.

Die Eigenschaft ersetzt das veraltete performance.timing.loadEventEnd, das absolute Unix-Zeitstempel lieferte.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitstempel in Millisekunden relativ zum Navigationsbeginn, zu dem der load-Handler abgeschlossen war. 0, falls das Ereignis noch nicht beendet ist.

Beispiele

Gesamtladezeit mit PerformanceObserver messen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`Seite komplett geladen nach ${entry.loadEventEnd.toFixed(1)} ms`);
  }
});

// buffered: true liefert auch bereits vorhandene Einträge
observer.observe({ type: 'navigation', buffered: true });

Seite komplett geladen nach 1284.6 ms

Dauer der eigenen load-Handler ermitteln

window.addEventListener('load', () => {
  // Erst nach Abschluss des load-Ereignisses ist loadEventEnd gesetzt
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    const handlerDauer = nav.loadEventEnd - nav.loadEventStart;
    console.log(`load-Handler: ${handlerDauer.toFixed(2)} ms`);
  }, 0);
});

load-Handler: 3.40 ms

Ladephasen an ein Monitoring senden

window.addEventListener('load', () => {
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    if (!nav || nav.loadEventEnd === 0) return;

    const metriken = {
      ttfb: nav.responseStart - nav.startTime,
      domFertig: nav.domContentLoadedEventEnd,
      ladeEnde: nav.loadEventEnd,
      typ: nav.type
    };
    navigator.sendBeacon('/api/rum', JSON.stringify(metriken));
    console.log(metriken);
  }, 0);
});

{ ttfb: 182.3, domFertig: 740.1, ladeEnde: 1290.8, typ: 'navigate' }

// Wichtig · Fallstricke

Wert 0 innerhalb des load-Handlers: Wer loadEventEnd direkt im load-Handler ausliest, erhält 0, weil der Handler ja noch läuft. Mit setTimeout(…, 0) oder einem PerformanceObserver auslesen.
Relative Zeit: Anders als das veraltete performance.timing.loadEventEnd ist der Wert relativ zu performance.timeOrigin, kein Unix-Zeitstempel. Für absolute Zeit performance.timeOrigin + nav.loadEventEnd rechnen.
Genauigkeit: Browser runden bzw. verrauschen Zeitstempel zum Schutz vor Timing-Angriffen (z. B. auf 100 µs, ohne Cross-Origin-Isolation teils gröber).
SPA-Navigation: Clientseitige Routenwechsel (History-API) erzeugen keinen neuen Navigationseintrag – loadEventEnd bezieht sich nur auf das initiale Laden.
Back/Forward-Cache: Bei Wiederherstellung aus dem bfcache wird kein neuer Wert erzeugt; dafür das pageshow-Ereignis mit event.persisted nutzen.
Unterstützt in allen modernen Browsern; Safari erst ab Version 15.

Siehe auch

PerformanceNavigationTiming.confidence PerformanceNavigationTiming.unloadEventEnd PerformanceNavigationTiming.loadEventStart PerformanceNavigationTiming.unloadEventStart PerformanceNavigationTiming.domComplete