PerformanceNavigationTiming: Eigenschaft `type`

Die Eigenschaft type kann die folgenden Werte haben:

"navigate"

Navigation, die durch das Klicken auf einen Link, die Eingabe der URL in die Adressleiste des Browsers, das Absenden eines Formulars oder die Initialisierung durch eine Skriptoperation außer reload und back_forward wie unten aufgeführt, gestartet wurde.

"reload"

Navigation über die Neuladungsoperation des Browsers, location.reload() oder eine Refresh-Pragma-Direktive wie <meta http-equiv="refresh" content="300">.

"back_forward"

Navigation über die Verlauf-Navigationsoperation des Browsers.

"prerender"

Navigation, die durch einen Prerender-Hinweis eingeleitet wurde.

Die Eigenschaft type kann verwendet werden, um zu überprüfen, ob die Navigation vom Typ reload war. Sie könnten diese reload-Einträge an einem serverseitigen Endpunkt sammeln, um festzustellen, welche Seiten Ihrer Website am häufigsten neu geladen werden, oder alle Navigationstypen sammeln und beispielsweise bestimmen, welcher Prozentsatz der Benutzer vor- und zurückgeht.

Beispiel mit einem PerformanceObserver, der über neue navigation-Leistungseinträge informiert, sobald diese in der Leistungstimeline des Browsers aufgezeichnet werden. Verwenden Sie die Option buffered, um auf Einträge von vor der Erstellung des Observers zuzugreifen.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.type === "reload") {
      console.log(`${entry.name} was reloaded!`);
      console.log(entry);
    }
  });
});

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

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

const entries = performance.getEntriesByType("navigation");
entries.forEach((entry) => {
  if (entry.type === "reload") {
    console.log(`${entry.name} was reloaded!`);
    console.log(entry);
  }
});