PerformanceNavigationTiming: domInteractive-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 domInteractive-Eigenschaft nur lesbar gibt einen DOMHighResTimeStamp zurück, der die Zeit unmittelbar bevor der Benutzeragent den readyState des Dokuments auf "interactive" setzt, darstellt.

Hinweis: Diese Eigenschaft ist nicht Time to interactive (TTI). Diese Eigenschaft bezieht sich auf die Zeit, zu der der DOM-Aufbau abgeschlossen ist und eine Interaktion mit diesem aus JavaScript möglich ist. Siehe auch den interactive-Status von Document.readyState, der dieser Eigenschaft entspricht.

Das Messen der DOM-Verarbeitungszeit kann unerheblich sein, es sei denn, Ihre Website hat einen sehr großen HTML-Quellcode, aus dem ein Document Object Model konstruiert werden soll.

Wenn kein parserblockierendes JavaScript vorhanden ist, wird das DOMContentLoaded-Ereignis (siehe domContentLoadedEventStart für den Zeitstempel) unmittelbar nach domInteractive ausgelöst.

Wert

Ein DOMHighResTimeStamp, der die Zeit unmittelbar bevor der Benutzeragent den readyState des Dokuments auf "interactive" setzt, darstellt.

Beispiele

Protokollierung der DOM-Interaktionszeit

Die domInteractive-Eigenschaft kann verwendet werden, um die Zeit zu protokollieren, wenn der DOM-Aufbau abgeschlossen ist und eine Interaktion mit diesem möglich ist.

Beispiel mit einem PerformanceObserver, der über neue navigation-Performance-Einträge benachrichtigt, wenn sie in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die buffered-Option, um auf Einträge zuzugreifen, die vor der Erstellung des Observers vorhanden sind.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `${entry.name}: domInteractive time: ${entry.domInteractive}ms`,
    );
  });
});

observer.observe({ type: "navigation", buffered: true });

Beispiel mit Performance.getEntriesByType(), das nur navigation-Performance-Einträge anzeigt, die in der Leistungstimeline des Browsers zum Zeitpunkt des Aufrufs dieser Methode vorhanden sind:

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  console.log(`${entry.name}: domInteractive time: ${entry.domInteractive}ms`);
});

Spezifikationen

Specification
Navigation Timing Level 2 # dom-performancenavigationtiming-dominteractive

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Document.readyState