PerformanceNavigationTiming.type — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceNavigationTiming.type

Beschreibung

Die Eigenschaft type eines PerformanceNavigationTiming-Eintrags liefert einen String, der die Art der Navigation zum aktuellen Dokument beschreibt. Den Eintrag erhält man über performance.getEntriesByType("navigation")[0] oder über einen PerformanceObserver mit dem Typ "navigation".

Mögliche Werte:

"navigate" – normale Navigation: Link-Klick, Eingabe der URL, Formularversand, Skript-Navigation (z. B. location.href = …), Lesezeichen.
"reload" – Neuladen der Seite, etwa über den Reload-Button oder location.reload().
"back_forward" – Navigation über den Verlauf (Zurück/Vorwärts-Button, history.back(), history.go()).
"prerender" – die Seite wurde vorab gerendert (z. B. über die Speculation Rules API).

Typische Anwendungsfälle sind Performance-Monitoring (RUM), bei dem Ladezeiten nach Navigationsart getrennt ausgewertet werden (ein Reload profitiert oft vom Cache und verfälscht sonst Statistiken), sowie Analyse-Logik, die Reloads nicht als neue Seitenaufrufe zählen soll. Die Eigenschaft ersetzt das veraltete performance.navigation.type mit seinen numerischen Konstanten.

Rückgabewert

Typ

"navigate" | "reload" | "back_forward" | "prerender"

Beschreibung

Ein String, der die Navigationsart des aktuellen Dokuments beschreibt.

Beispiele

Navigationsart auslesen

const [nav] = performance.getEntriesByType("navigation");

if (nav) {
  console.log(`Navigationsart: ${nav.type}`);
}

Navigationsart: navigate

Reloads aus der Seitenaufruf-Statistik ausschließen

const [nav] = performance.getEntriesByType("navigation");

const isReload = nav?.type === "reload";

if (!isReload) {
  // Nur echte Seitenaufrufe an das Analyse-Backend senden
  navigator.sendBeacon("/analytics/pageview", JSON.stringify({
    url: location.pathname,
    navigationType: nav?.type ?? "unknown"
  }));
} else {
  console.log("Reload erkannt – kein neuer Pageview gezählt.");
}

Reload erkannt – kein neuer Pageview gezählt.

Ladezeit nach Navigationsart per PerformanceObserver erfassen

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const loadTime = Math.round(entry.loadEventEnd - entry.startTime);
    console.log(`[${entry.type}] Ladezeit: ${loadTime} ms`);
  }
});

// buffered: true liefert auch den bereits erfassten Eintrag
observer.observe({ type: "navigation", buffered: true });

[back_forward] Ladezeit: 312 ms

Wiederherstellung aus dem bfcache erkennen

// Bei bfcache-Wiederherstellung entsteht KEIN neuer Navigation-Eintrag
window.addEventListener("pageshow", (event) => {
  if (event.persisted) {
    console.log("Aus dem bfcache wiederhergestellt");
  } else {
    const [nav] = performance.getEntriesByType("navigation");
    console.log(`Frisch geladen, Typ: ${nav?.type}`);
  }
});

Aus dem bfcache wiederhergestellt

// Wichtig · Fallstricke

bfcache: Wird eine Seite aus dem Back/Forward-Cache wiederhergestellt, wird kein neuer Eintrag erzeugt – type behält den Wert der ursprünglichen Navigation. Zur Erkennung pageshow mit event.persisted verwenden.
Soft-Navigationen in Single-Page-Apps (history.pushState()) verändern type nicht, da nur ein Eintrag pro Dokument existiert.
Der Wert "prerender" ist neuer und wird nicht von allen Browsern gemeldet; bei vorgerenderten Seiten zusätzlich document.prerendering bzw. activationStart prüfen.
Das veraltete performance.navigation.type (Werte 0–2, 255) ist deprecated und sollte nicht mehr verwendet werden.
In Safari erst ab Version 15 verfügbar – vor dem Zugriff prüfen, ob getEntriesByType("navigation") einen Eintrag liefert.

Siehe auch

Performance.navigation PerformanceEntry.navigationId PerformanceNavigationTiming.confidence PerformanceNavigationTiming.domComplete PerformanceNavigationTiming.loadEventEnd