Start · Sprachen · JavaScript · Referenz · PerformanceTiming.loadEventStart

PerformanceTiming.loadEventStart

Eigenschaft

Schreibgeschützter Zeitstempel in Millisekunden seit der UNIX-Epoche, zu dem das <code>load</code>-Ereignis des aktuellen Dokuments ausgelöst wurde; <code>0</code>, falls noch nicht geschehen.

seit JavaScript Veraltet (Navigation Timing Level 1); Baseline: al deprecated seit ja Kategorie: webapi

Signatur

PerformanceTiming.loadEventStart

Beschreibung

Die schreibgeschützte Eigenschaft loadEventStart des (veralteten) Interfaces PerformanceTiming gibt an, wann das load-Ereignis für das aktuelle Dokument gesendet wurde. Der Wert ist ein unsigned long long, also eine ganze Zahl in Millisekunden seit der UNIX-Epoche (1. Januar 1970, 00:00:00 UTC). Wurde das Ereignis noch nicht ausgelöst, ist der Wert 0.

Zusammen mit loadEventEnd lässt sich messen, wie lange die load-Handler der Seite gebraucht haben. Mit navigationStart als Bezugspunkt erhält man, wie lange es vom Beginn der Navigation bis zum Start des Ladeereignisses gedauert hat. Diese Kennzahl war früher üblich für Real-User-Monitoring (RUM).

Man greift über performance.timing.loadEventStart darauf zu. In neuem Code sollte man stattdessen die Eigenschaft PerformanceNavigationTiming.loadEventStart der Navigation Timing API Level 2 verwenden. Man bekommt sie über performance.getEntriesByType("navigation")[0]. Dieser Wert ist ein hochauflösender DOMHighResTimeStamp relativ zu performance.timeOrigin und kein absoluter Epochen-Zeitstempel.

Rückgabewert

Typ
number
Beschreibung
Ganzzahliger Zeitstempel in Millisekunden seit der UNIX-Epoche, zu dem das load-Ereignis ausgelöst wurde, oder 0, wenn es noch nicht ausgelöst wurde.

Beispiele

Zeit bis zum load-Ereignis messen

window.addEventListener('load', () => {
  // Innerhalb des load-Handlers ist loadEventStart bereits gesetzt
  const { navigationStart, loadEventStart } = performance.timing;
  console.log(`Bis zum load-Ereignis: ${loadEventStart - navigationStart} ms`);
});
Bis zum load-Ereignis: 842 ms

Dauer der load-Handler ermitteln (nach Abschluss)

window.addEventListener('load', () => {
  // loadEventEnd wird erst nach allen load-Handlern gesetzt,
  // daher die Auswertung in den nächsten Task verschieben
  setTimeout(() => {
    const t = performance.timing;
    console.log(`load-Handler-Dauer: ${t.loadEventEnd - t.loadEventStart} ms`);
  }, 0);
});
load-Handler-Dauer: 3 ms

Moderne Alternative mit PerformanceNavigationTiming

window.addEventListener('load', () => {
  setTimeout(() => {
    const [nav] = performance.getEntriesByType('navigation');
    if (nav) {
      // Relativ zu performance.timeOrigin, hochauflösend
      console.log(`loadEventStart: ${nav.loadEventStart.toFixed(1)} ms`);
      // Absoluter Zeitpunkt (vergleichbar mit dem alten Wert)
      console.log(new Date(performance.timeOrigin + nav.loadEventStart).toISOString());
    } else {
      // Rückfall auf die veraltete API
      console.log(new Date(performance.timing.loadEventStart).toISOString());
    }
  }, 0);
});
loadEventStart: 841.7 ms 2024-05-14T09:21:07.842Z

Prüfen, ob das load-Ereignis schon stattgefunden hat

const loadStarted = performance.timing.loadEventStart !== 0;
console.log(loadStarted ? 'load-Ereignis wurde ausgelöst' : 'Seite lädt noch');
Seite lädt noch

// Wichtig · Fallstricke

  • Veraltet: PerformanceTiming ist in der Navigation Timing Level 2 als veraltet markiert. Wegen der Kompatibilität unterstützen die Browser es noch, es kann aber künftig entfernt werden. Verwende besser PerformanceNavigationTiming.loadEventStart.
  • Wert 0: Liest man den Wert, bevor das load-Ereignis ausgelöst wurde (etwa in einem Skript im <head>), erhält man 0. Differenzen mit anderen Werten ergeben dann unsinnige negative Zahlen.
  • loadEventEnd im Handler: Innerhalb eines load-Handlers ist loadEventEnd noch 0. Werte ihn deshalb erst per setTimeout aus.
  • Genauigkeit: Der Wert hat nur Millisekunden-Auflösung und hängt von der Systemuhr ab. Uhrumstellungen können ihn verfälschen. Die Werte der neuen API sind monoton und hochauflösend, werden aber aus Datenschutzgründen (Fingerprinting, Spectre) je nach Browser gerundet.
  • Die Eigenschaft ist in Web Workers nicht verfügbar, denn dort gibt es kein performance.timing.