PerformanceNavigationTiming.loadEventStart — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.loadEventStart

Beschreibung

Die schreibgeschützte Eigenschaft loadEventStart des Interfaces PerformanceNavigationTiming gibt den Zeitpunkt in Millisekunden an, an dem der Browser das load-Ereignis des Dokuments auslöst, also direkt bevor die registrierten Handler ausgeführt werden. Der Wert bezieht sich auf performance.timeOrigin, den Beginn der Navigation.

Zusammen mit loadEventEnd lässt sich messen, wie lange die eigenen load-Handler brauchen. Der Wert selbst zeigt außerdem an, wann alle Ressourcen der Seite (Bilder, Stylesheets, Skripte, iframes) fertig geladen sind. Deshalb ist er eine gängige Kennzahl für die gesamte Ladezeit der Seite.

Den Eintrag erhält man über performance.getEntriesByType("navigation")[0] oder über einen PerformanceObserver mit type: "navigation". Solange das load-Ereignis noch nicht ausgelöst wurde, ist der Wert 0.

Rückgabewert

Typ

DOMHighResTimeStamp (number)

Beschreibung

Zeitpunkt in Millisekunden relativ zu performance.timeOrigin, direkt vor dem Start des load-Handlers. Der Wert ist 0, wenn das Ereignis noch nicht ausgelöst wurde.

Beispiele

Dauer der load-Handler messen

window.addEventListener('load', () => {
  // Einen Tick warten, damit loadEventEnd gesetzt ist
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    const dauer = nav.loadEventEnd - nav.loadEventStart;
    console.log(`load-Start: ${nav.loadEventStart.toFixed(1)} ms`);
    console.log(`load-Handler-Dauer: ${dauer.toFixed(1)} ms`);
  }, 0);
});

load-Start: 842.3 ms load-Handler-Dauer: 3.7 ms

Mit PerformanceObserver erfassen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Seite vollständig geladen nach',
      Math.round(entry.loadEventStart), 'ms');
  }
});
// buffered: true liefert auch bereits erfasste Einträge
observer.observe({ type: 'navigation', buffered: true });

Seite vollständig geladen nach 842 ms

Ladephasen an Analytics senden

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

    const metriken = {
      ttfb: nav.responseStart,
      domFertig: nav.domContentLoadedEventStart,
      ladeStart: nav.loadEventStart,
      ressourcenNachDom: nav.loadEventStart - nav.domContentLoadedEventEnd
    };
    navigator.sendBeacon('/analytics', JSON.stringify(metriken));
    console.log(metriken);
  }, 0);
});

{ ttfb: 120.4, domFertig: 510.2, ladeStart: 842.3, ressourcenNachDom: 330.5 }

// Wichtig · Fallstricke

Zeitpunkt der Abfrage: Wer den Wert vor dem load-Ereignis ausliest, etwa in einem Inline-Skript, erhält 0. loadEventEnd wird erst nach allen Handlern gesetzt, deshalb die Auswertung per setTimeout verzögern oder einen PerformanceObserver nutzen.
Genauigkeit: Zum Schutz vor Timing-Angriffen runden Browser die Werte ab. Firefox rundet ohne Cross-Origin-Isolation zum Beispiel auf 1 ms oder gröber. Ohne Timing-Allow-Origin können Werte bei Cross-Origin-Weiterleitungen fehlen.
Nur für die Hauptnavigation: Bei Single-Page-Apps beschreibt der Eintrag nur den ersten Seitenaufruf. Routenwechsel auf der Client-Seite werden nicht erfasst.
Veraltetes Gegenstück: performance.timing.loadEventStart aus der Navigation Timing Level 1 ist veraltet und liefert absolute Unix-Zeitstempel. Verwende stattdessen diese Eigenschaft.
Browser-Unterstützung: Seiten aus dem Back/Forward-Cache erzeugen keinen neuen Navigationseintrag.

Siehe auch

PerformanceLongAnimationFrameTiming.styleAndLayoutStart PerformanceNavigationTiming.unloadEventStart PerformanceNavigationTiming.loadEventEnd PerformanceNavigationTiming.unloadEventEnd PerformanceNavigationTiming.activationStart