Signatur
Beschreibung
Die schreibgeschützte Eigenschaft domContentLoadedEventEnd des über performance.timing erreichbaren PerformanceTiming-Objekts liefert den Zeitpunkt, an dem alle Skripte fertig ausgeführt sind, die nach dem Parsen ausgeführt werden müssen, und alle DOMContentLoaded-Listener abgeschlossen sind. Der Wert ist ein unsigned long long in Millisekunden seit dem UNIX-Epoch (1.1.1970, UTC).
Zusammen mit domContentLoadedEventStart lässt sich messen, wie lange die eigenen DOMContentLoaded-Handler brauchen. Die Differenz zu navigationStart ergibt die Zeit von Navigationsbeginn bis zu einem vollständig initialisierten, interaktiven DOM, eine klassische Kennzahl für die gefühlte Ladegeschwindigkeit.
Die gesamte PerformanceTiming-Schnittstelle ist veraltet. In neuem Code solltest du den Eintrag PerformanceNavigationTiming nutzen, den du über performance.getEntriesByType("navigation")[0] bekommst. Dessen Eigenschaft domContentLoadedEventEnd ist ein hochauflösender DOMHighResTimeStamp relativ zu performance.timeOrigin und kein absoluter Epoch-Wert.
Rückgabewert
0.Beispiele
Dauer der DOMContentLoaded-Handler messen (Legacy-API)
window.addEventListener("load", () => {
const t = performance.timing;
const handlerDauer = t.domContentLoadedEventEnd - t.domContentLoadedEventStart;
const bisDomBereit = t.domContentLoadedEventEnd - t.navigationStart;
console.log(`DOMContentLoaded-Handler: ${handlerDauer} ms`);
console.log(`Navigation bis DOM bereit: ${bisDomBereit} ms`);
});Modernes Pendant mit PerformanceNavigationTiming
window.addEventListener("load", () => {
const [nav] = performance.getEntriesByType("navigation");
if (!nav) return;
// Werte sind relativ zu performance.timeOrigin (hochauflösend)
console.log(`DOM bereit nach ${nav.domContentLoadedEventEnd.toFixed(1)} ms`);
console.log(`Handler-Dauer: ${(nav.domContentLoadedEventEnd - nav.domContentLoadedEventStart).toFixed(1)} ms`);
});Robuste Messung mit Rückfall auf die alte API
const domBereitMs = () => {
const [nav] = performance.getEntriesByType?.("navigation") ?? [];
if (nav && nav.domContentLoadedEventEnd > 0) {
return nav.domContentLoadedEventEnd;
}
const t = performance.timing;
return t && t.domContentLoadedEventEnd > 0
? t.domContentLoadedEventEnd - t.navigationStart
: null; // Ereignis noch nicht abgeschlossen
};
window.addEventListener("load", () => {
// setTimeout, damit alle Zeitstempel sicher gesetzt sind
setTimeout(() => console.log("DOM bereit:", domBereitMs(), "ms"), 0);
});// Wichtig · Fallstricke
- Veraltet:
performance.timingist aus Navigation Timing Level 2 entfernt worden. Browser unterstützen es aus Kompatibilitätsgründen noch, aber für neuen Code solltest duPerformanceNavigationTimingverwenden. - Wert 0: Wenn du die Eigenschaft innerhalb eines eigenen
DOMContentLoaded-Handlers liest, ist das Ereignis noch nicht zu Ende und der Wert ist0. Lies ihn deshalb erst imload-Ereignis oder später. - Unterschiedliche Zeitbasis: Die alte API liefert absolute Epoch-Zeitstempel, die neue relative hochauflösende Werte. Mische beide nicht in einer Rechnung.
- Die Genauigkeit wird aus Datenschutzgründen (Schutz vor Fingerprinting und Timing-Angriffen) auf ganze Millisekunden gerundet. Da der Wert auf der Systemuhr beruht, können Uhrsprünge ihn verfälschen.