PerformanceNavigationTiming: domContentLoadedEventEnd-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Oktober 2021⁩.

Die schreibgeschützte Eigenschaft domContentLoadedEventEnd gibt einen DOMHighResTimeStamp zurück, der den Zeitpunkt unmittelbar nach Abschluss des Event-Handlers des aktuellen Dokuments für das DOMContentLoaded Ereignis darstellt.

Typischerweise warten Frameworks und Bibliotheken auf das DOMContentLoaded-Ereignis, bevor sie ihren Code ausführen. Wir können die domContentLoadedEventEnd- und die domContentLoadedEventStart-Eigenschaften verwenden, um zu berechnen, wie lange die Ausführung dauert.

Wert

Ein DOMHighResTimeStamp, der den Zeitpunkt unmittelbar nach Abschluss des Event-Handlers des aktuellen Dokuments für das DOMContentLoaded Ereignis darstellt.

Beispiele

Messung der Dauer des `DOMContentLoaded`-Event-Handlings

Die domContentLoadedEventEnd-Eigenschaft kann verwendet werden, um zu messen, wie lange die Verarbeitung des DOMContentLoaded-Event-Handlers dauert.

Beispiel mit einem PerformanceObserver, der benachrichtigt wird, wenn neue navigation-Leistungseinträge in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge von vor der Erstellung des Beobachters zuzugreifen.

const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; console.log( `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`, ); }); }); observer.observe({ type: "navigation", buffered: true });

Beispiel mit Performance.getEntriesByType(), das nur navigation-Leistungseinträge anzeigt, die zum Zeitpunkt des Aufrufs dieser Methode in der Performance-Zeitleiste des Browsers vorhanden sind:

const entries = performance.getEntriesByType("navigation"); entries.forEach((entry) => { const domContentLoadedTime = entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart; console.log( `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`, ); });