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