PerformanceNavigationTiming: type-Eigenschaft

Die type-Eigenschaft kann die folgenden Werte haben:

"navigate"

Die Navigation wurde durch Klicken auf einen Link, Eingabe der URL in die Adressleiste des Browsers, Absenden eines Formulars oder Initialisierung durch einen Skriptvorgang, der nicht reload und back_forward wie unten aufgeführt, eingeleitet.

"reload"

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

"back_forward"

Die Navigation erfolgt durch die Verlaufstraversierung des Browsers.

"prerender"

Die Navigation wird durch einen prerender hint eingeleitet.

Die type-Eigenschaft kann verwendet werden, um zu überprüfen, ob die Navigation vom Typ reload war. Sie könnten diese reload-Einträge an einen serverseitigen Endpunkt sammeln, um festzustellen, welche Seiten Ihrer Website am häufigsten neu geladen werden, oder alle Navigationstypen sammeln und feststellen, wie viele Prozent der Benutzer vor- und zurücknavigieren, zum Beispiel.

Beispiel mit einem PerformanceObserver, der über neue navigation-Leistungseinträge benachrichtigt, sobald 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) => {
    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);
  }
});