Navigation Timing ist ein Teil der Performance API und bietet Metriken, die mit dem Navigieren von einer Seite zur anderen verbunden sind. Zum Beispiel können Sie bestimmen, wie viel Zeit das Laden oder Entladen eines Dokuments in Anspruch nimmt oder die Zeit protokollieren, die verging, bis die DOM-Konstruktion abgeschlossen ist und die Interaktion mit dem DOM möglich ist.
Nur das aktuelle Dokument wird berücksichtigt, daher gibt es normalerweise nur ein PerformanceNavigationTiming-Objekt zu beobachten. Es erweitert die PerformanceEntry-Schnittstelle mit dem entryType von "navigation" und erbt auch von PerformanceResourceTiming, sodass alle Zeitstempel aus dem Prozess des Abrufens des Dokuments ebenfalls verfügbar sind.
Abbildung 1. Navigations-Zeitstempel (Quelle).
Die Dokument-Navigations-Zeitstempel (zusätzlich zu denen von Resource Timing) sind:
startTime: Immer 0.unloadEventStart: (wenn es ein vorheriges Dokument gibt) der Zeitstempel unmittelbar bevor der unload Event-Handler des aktuellen Dokuments startet.unloadEventEnd: (wenn es ein vorheriges Dokument gibt) der Zeitstempel unmittelbar nachdem der unload Event-Handler des aktuellen Dokuments abgeschlossen wurde.domInteractive: Zeitstempel, wenn die DOM-Konstruktion abgeschlossen ist und die Interaktion damit aus JavaScript möglich ist.domContentLoadedEventStart: Zeitstempel unmittelbar bevor der DOMContentLoaded Event-Handler des aktuellen Dokuments startet.domContentLoadedEventEnd: Zeitstempel unmittelbar nachdem der DOMContentLoaded Event-Handler des aktuellen Dokuments abgeschlossen wurde.domComplete: Zeitstempel, wenn das Dokument und alle Unterressourcen das Laden abgeschlossen haben.loadEventStart: Zeitstempel unmittelbar bevor der load Event-Handler des aktuellen Dokuments startet.loadEventEnd: Zeitstempel unmittelbar nachdem der load Event-Handler des aktuellen Dokuments abgeschlossen wurde.Die Schnittstelle PerformanceNavigationTiming bietet zusätzliche Eigenschaften wie redirectCount, die die Anzahl der Weiterleitungen zurückgibt, und type, die den Navigationstyp angibt.
Die Zeitstempel domContentLoadedEventEnd und domContentLoadedEventStart können verwendet werden, um zu messen, wie lange die Verarbeitung des DOMContentLoaded Event-Handlers dauert.
Dieses Beispiel verwendet einen PerformanceObserver, der den Aufrufer über neue navigation-Performance-Einträge informiert, während sie in der Performance-Zeitleiste des Browsers aufgezeichnet werden. Das Beispiel verwendet die buffered-Option, um auf Einträge zuzugreifen, die aufgezeichnet wurden, bevor der Beobachter erstellt wurde.
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 });
Für weitere Beispiele sehen Sie sich die Eigenschaftsseiten in der PerformanceNavigationTiming-Referenzdokumentation an.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4