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