PerformanceNavigationTiming: domContentLoadedEventEnd-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2021 browserübergreifend verfügbar.

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`,
  );
});