Signatur
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
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`);
});
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);
});
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);
});
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');
// Wichtig · Fallstricke
- Veraltet:
PerformanceTimingist 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 besserPerformanceNavigationTiming.loadEventStart. - Wert 0: Liest man den Wert, bevor das
load-Ereignis ausgelöst wurde (etwa in einem Skript im<head>), erhält man0. Differenzen mit anderen Werten ergeben dann unsinnige negative Zahlen. - loadEventEnd im Handler: Innerhalb eines
load-Handlers istloadEventEndnoch0. Werte ihn deshalb erst persetTimeoutaus. - 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.