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

Spezifikationen

Specification
Navigation Timing Level 2 # dom-performancenavigationtiming-domcontentloadedeventend

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

DOMContentLoaded