Signatur
Beschreibung
performance.timing.domContentLoadedEventStart liefert den Zeitpunkt, direkt nachdem der HTML-Parser das Dokument fertig verarbeitet hat und unmittelbar bevor er das Ereignis DOMContentLoaded auslöst. Der Wert ist eine ganze Zahl in Millisekunden seit der UNIX-Epoche (1. Januar 1970, UTC). Er ist also ein absoluter Zeitpunkt und kein Wert relativ zum Seitenstart.
Man nutzt die Eigenschaft vor allem, um zusammen mit anderen Werten von PerformanceTiming Kennzahlen zu berechnen, etwa die Zeit vom Navigationsstart bis zum Beginn von DOMContentLoaded (domContentLoadedEventStart - navigationStart). Zieht man domContentLoadedEventStart von domContentLoadedEventEnd ab, erhält man die Laufzeit aller synchronen DOMContentLoaded-Handler.
Die gesamte Schnittstelle PerformanceTiming ist veraltet. Für neuen Code sollte man PerformanceNavigationTiming verwenden, das man über performance.getEntriesByType("navigation") erhält. Dort gibt es die gleichnamige Eigenschaft domContentLoadedEventStart als hochauflösenden DOMHighResTimeStamp relativ zu performance.timeOrigin.
Rückgabewert
unsigned long long) in Millisekunden seit der UNIX-Epoche. Der Wert ist 0, solange das Ereignis noch nicht begonnen hat.Beispiele
Zeit bis DOMContentLoaded messen (Legacy-API)
window.addEventListener('load', () => {
const t = performance.timing;
const bisDcl = t.domContentLoadedEventStart - t.navigationStart;
console.log(`DOMContentLoaded begann nach ${bisDcl} ms`);
});Dauer der DOMContentLoaded-Handler ermitteln
document.addEventListener('DOMContentLoaded', () => {
// Simulierte, aufwendige Initialisierung
const ende = Date.now() + 50;
while (Date.now() < ende) {}
});
window.addEventListener('load', () => {
const { domContentLoadedEventStart: start, domContentLoadedEventEnd: end } = performance.timing;
console.log(`DCL-Handler liefen ${end - start} ms`);
});Moderne Alternative mit Fallback
const dclStart = () => {
const [nav] = performance.getEntriesByType('navigation');
if (nav) {
// Relativ zu performance.timeOrigin, hochauflösend
return nav.domContentLoadedEventStart;
}
const t = performance.timing;
return t.domContentLoadedEventStart - t.navigationStart;
};
window.addEventListener('load', () => {
console.log(`DCL-Start: ${dclStart().toFixed(1)} ms`);
});// Wichtig · Fallstricke
- Veraltet:
PerformanceTimingkann in künftigen Browserversionen entfernt werden. Verwende stattdessenPerformanceNavigationTiming. - Wenn du den Wert zu früh ausliest, etwa in einem synchronen Skript im
<head>, ist er noch0. Lies ihn deshalb erst imload-Ereignis oder danach aus. - Der Wert ist ein absoluter Epoch-Zeitstempel. Direkte Vergleiche mit
performance.now()ergeben daher keinen Sinn. Rechne ihn immer relativ zunavigationStartum. - Die Genauigkeit liegt nur bei ganzen Millisekunden. Außerdem kann eine Änderung der Systemuhr den Wert verfälschen. Die neue API verwendet eine monotone, hochauflösende Zeitbasis, deren Auflösung Browser zum Schutz vor Timing-Angriffen allerdings etwas vergröbern können.
- In Web Workern gibt es die Eigenschaft nicht, weil dort kein Dokument geparst wird.