Navigation timing

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.

PerformanceEntry PerformanceResourceTiming PerformanceNavigationTiming

Diagramm der Zeitstempel, das die Zeitstempel in der Reihenfolge anzeigt, in der sie für das Abrufen eines Dokuments aufgezeichnet werden Abbildung 1. Navigations-Zeitstempel (Quelle).

Die Dokument-Navigations-Zeitstempel (zusätzlich zu denen von Resource Timing) sind:

  1. startTime: Immer 0.
  2. unloadEventStart: (wenn es ein vorheriges Dokument gibt) der Zeitstempel unmittelbar bevor der unload Event-Handler des aktuellen Dokuments startet.
  3. unloadEventEnd: (wenn es ein vorheriges Dokument gibt) der Zeitstempel unmittelbar nachdem der unload Event-Handler des aktuellen Dokuments abgeschlossen wurde.
  4. domInteractive: Zeitstempel, wenn die DOM-Konstruktion abgeschlossen ist und die Interaktion damit aus JavaScript möglich ist.
  5. domContentLoadedEventStart: Zeitstempel unmittelbar bevor der DOMContentLoaded Event-Handler des aktuellen Dokuments startet.
  6. domContentLoadedEventEnd: Zeitstempel unmittelbar nachdem der DOMContentLoaded Event-Handler des aktuellen Dokuments abgeschlossen wurde.
  7. domComplete: Zeitstempel, wenn das Dokument und alle Unterressourcen das Laden abgeschlossen haben.
  8. loadEventStart: Zeitstempel unmittelbar bevor der load Event-Handler des aktuellen Dokuments startet.
  9. loadEventEnd: Zeitstempel unmittelbar nachdem der load Event-Handler des aktuellen Dokuments abgeschlossen wurde.

Andere Eigenschaften

Die Schnittstelle PerformanceNavigationTiming bietet zusätzliche Eigenschaften wie redirectCount, die die Anzahl der Weiterleitungen zurückgibt, und type, die den Navigationstyp angibt.

Beispiel

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.

js
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.

Siehe auch