Navigation timing
Navigation Timing ist Teil der Performance API und liefert Metriken, die mit der Navigation von einer Seite zur anderen verbunden sind. Zum Beispiel können Sie bestimmen, wie lange es dauert, ein Dokument zu laden oder zu entladen, oder die Zeit protokollieren, die benötigt wird, bis die DOM-Konstruktion abgeschlossen ist und die Interaktion mit dem DOM möglich ist.
Nur das aktuelle Dokument wird einbezogen, sodass normalerweise nur ein PerformanceNavigationTiming-Objekt zur Beobachtung vorhanden ist. Es erweitert das PerformanceEntry-Interface mit dem entryType von "navigation" und erbt auch von PerformanceResourceTiming, sodass alle Zeitstempel des Vorgangs zum Abrufen des Dokuments ebenfalls verfügbar sind.
Navigationszeitstempel
Abbildung 1. Navigationszeitstempel (Quelle).
Die Zeitstempel der Dokumentnavigation (zusätzlich zu denen aus Resource Timing) sind:
startTime: Immer 0.unloadEventStart: (wenn ein vorheriges Dokument vorhanden ist) der Zeitstempel unmittelbar bevor derunload-Ereignishandler des aktuellen Dokuments startet.unloadEventEnd: (wenn ein vorheriges Dokument vorhanden ist) der Zeitstempel unmittelbar nachdem derunload-Ereignishandler des aktuellen Dokuments abgeschlossen ist.domInteractive: Zeitstempel, wenn die DOM-Konstruktion abgeschlossen ist und die Interaktion damit aus JavaScript möglich ist.domContentLoadedEventStart: Zeitstempel unmittelbar bevor derDOMContentLoaded-Ereignishandler des aktuellen Dokuments startet.domContentLoadedEventEnd: Zeitstempel unmittelbar nachdem derDOMContentLoaded-Ereignishandler des aktuellen Dokuments abgeschlossen ist.domComplete: Zeitstempel, wenn das Dokument und alle Unterressourcen fertig geladen sind.loadEventStart: Zeitstempel unmittelbar bevor derload-Ereignishandler des aktuellen Dokuments startet.loadEventEnd: Zeitstempel unmittelbar nachdem derload-Ereignishandler des aktuellen Dokuments abgeschlossen ist.
Leistungszeit-Vertrauen
Die PerformanceNavigationTiming.confidence-Eigenschaft gibt ein PerformanceTimingConfidence-Objekt zurück, das Informationen enthält, die anzeigen, ob ein Leistungsdatensatz die typische Anwendungsleistung widerspiegelt oder wahrscheinlich von externen Faktoren beeinflusst wird.
Zum Beispiel, wenn eine Website nach einem "Kaltstart" des Browsers oder einer Sitzungswiederherstellung geladen wurde, können ihre Seiten dadurch langsamer geladen werden. In solchen Fällen würde für einen zugehörigen Leistungsdatensatz ein low-Vertrauenswert zurückgegeben. Andererseits, wenn der Browser feststellt, dass ein zurückgegebener Leistungsdatensatz repräsentativ für die typische Anwendungsleistung ist, wird ein high-Vertrauenswert zurückgegeben.
Dieses Vertrauensmaß ist für Entwickler nützlich, um zu bestimmen, ob ein Leistungsproblem ein legitimes Anliegen ist oder ob es sich um einen Ausreißer handelt, der durch externe Faktoren verursacht wird. Siehe PerformanceTimingConfidence für weitere Informationen.
Andere Eigenschaften
Das PerformanceNavigationTiming-Interface bietet zusätzliche Eigenschaften wie redirectCount, das die Anzahl der Umleitungen zurückgibt, und type, das den Navigationstyp angibt.
Beispiel
Die Zeitstempel domContentLoadedEventEnd und domContentLoadedEventStart können verwendet werden, um zu messen, wie lange es dauert, den DOMContentLoaded-Ereignishandler zu verarbeiten.
Dieses Beispiel verwendet einen PerformanceObserver, der den Aufrufer über neue navigation-Leistungseinträge benachrichtigt, sobald diese in der Leistungstimeline des Browsers aufgezeichnet werden. Das Beispiel verwendet die buffered-Option, um auf Einträge zuzugreifen, die vor der Erstellung des Observers aufgezeichnet wurden.
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 });
Weitere Beispiele finden Sie auf den Eigenschaftsseiten in der PerformanceNavigationTiming-Referenzdokumentation.