PerformanceNavigationTiming: domContentLoadedEventStart-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 domContentLoadedEventStart-Eigenschaft (nur lesbar) gibt einen DOMHighResTimeStamp zurück, der die Zeit unmittelbar vor dem Start des Event-Handlers für DOMContentLoaded des aktuellen Dokuments darstellt.

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

Wert

Ein DOMHighResTimeStamp, der die Zeit unmittelbar vor dem Start des Event-Handlers für DOMContentLoaded des aktuellen Dokuments darstellt.

Beispiele

Zeitmessung des DOMContentLoaded-Event-Handlers

Die domContentLoadedEventStart-Eigenschaft kann verwendet werden, um zu messen, wie lange es dauert, den DOMContentLoaded-Event-Handler zu verarbeiten.

Beispiel mit einem PerformanceObserver, der über neue navigation-Performance-Einträge benachrichtigt, sobald diese in der Performance-Zeitachse des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge von vor der Erstellung des Observers zuzugreifen.

js
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-Performance-Einträge anzeigt, die in der Performance-Zeitachse des Browsers zum Zeitpunkt des Aufrufs dieser Methode vorhanden sind:

js
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-domcontentloadedeventstart

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
domContentLoadedEventStart

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch