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.

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:

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

BCD tables only load in the browser

Siehe auch

DOMContentLoaded