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 Oktober 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
Loading…