PerformanceSoftNavigation.navigationType — Eigenschaft · JavaScript-Referenz

Signatur

PerformanceSoftNavigation.navigationType

Beschreibung

Die schreibgeschützte Eigenschaft navigationType eines PerformanceSoftNavigation-Eintrags gibt an, wie eine sogenannte Softnavigation ausgelöst wurde. Eine Softnavigation ist ein Seitenwechsel innerhalb einer Single-Page-Application (SPA). Dabei lädt der Browser kein neues Dokument. Stattdessen ändert JavaScript nach einer Nutzerinteraktion die URL (z. B. über history.pushState() oder die Navigation-API) und aktualisiert den DOM.

Mögliche Werte:

"push": Ein neuer Eintrag wurde zum Verlauf hinzugefügt, etwa über history.pushState() oder navigation.navigate().
"replace": Der aktuelle Verlaufseintrag wurde ersetzt, etwa über history.replaceState().
"reload": Die aktuelle Ansicht wurde neu geladen, ohne dass ein neues Dokument geladen wurde, etwa über navigation.reload() mit Abfangen.
"traverse": Der Nutzer hat sich im Verlauf vor- oder zurückbewegt, z. B. mit der Zurück-Taste (popstate/history.back()).

Die Eigenschaft ist vor allem für Real User Monitoring (RUM) nützlich. Damit lassen sich Messwerte wie LCP oder INP nach Navigationsart trennen. Zurück-Navigationen sind zum Beispiel oft schneller, weil Daten bereits im Cache liegen. Ohne diese Trennung würden sie die Statistik verzerren. Die Einträge fragst du mit einem PerformanceObserver für den Eintragstyp "soft-navigation" ab.

Rückgabewert

Typ

"push" | "replace" | "reload" | "traverse"

Beschreibung

Eine Zeichenkette, die den Typ der Softnavigation angibt.

Beispiele

Softnavigationen beobachten und Typ ausgeben

// Prüfen, ob der Browser Softnavigation-Einträge unterstützt
if (PerformanceObserver.supportedEntryTypes?.includes('soft-navigation')) {
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      console.log(`${entry.navigationType} → ${entry.name} @ ${Math.round(entry.startTime)} ms`);
    }
  });
  // buffered: true liefert auch Einträge, die schon vor dem Beobachten entstanden sind
  observer.observe({ type: 'soft-navigation', buffered: true });
} else {
  console.log('Soft Navigations API wird nicht unterstützt');
}

push → https://example.com/produkte @ 4213 ms traverse → https://example.com/ @ 9876 ms

Softnavigationen nach Typ zählen (RUM)

const counts = { push: 0, replace: 0, reload: 0, traverse: 0 };

const observer = new PerformanceObserver((list) => {
  for (const { navigationType } of list.getEntries()) {
    counts[navigationType] = (counts[navigationType] ?? 0) + 1;
  }
});
observer.observe({ type: 'soft-navigation', buffered: true });

// Beim Verlassen der Seite an den Analytics-Endpunkt senden
addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/rum', JSON.stringify(counts));
  }
});

Zurück-Navigationen aus der Auswertung herausfiltern

const durations = [];

new PerformanceObserver((list) => {
  list.getEntries()
    .filter((entry) => entry.navigationType !== 'traverse')
    .forEach((entry) => durations.push({ url: entry.name, start: entry.startTime }));
  console.log('Relevante Navigationen:', durations.length);
}).observe({ type: 'soft-navigation', buffered: true });

Relevante Navigationen: 3

// Wichtig · Fallstricke

Experimentell: Die Soft Navigations API gibt es bisher nur in Chromium-Browsern, und dort nur hinter einem Flag (chrome://flags/#enable-experimental-web-platform-features) oder über einen Origin Trial. Firefox und Safari unterstützen sie nicht. Prüfe die Unterstützung daher immer mit PerformanceObserver.supportedEntryTypes.includes('soft-navigation').
Andere Werte als bei harten Navigationen: PerformanceNavigationTiming.type verwendet "navigate", "reload", "back_forward" und "prerender". Diese Werte darfst du nicht mit navigationType vermischen, denn dort heißt die Zurück-/Vorwärts-Navigation "traverse".
Der Browser erzeugt einen Eintrag nur, wenn seine Heuristik greift: Eine Nutzerinteraktion (Klick, Tastendruck) muss sowohl eine URL-Änderung als auch eine sichtbare DOM-Änderung mit Paint auslösen. Programmatische URL-Wechsel ohne Interaktion werden nicht erfasst.
Die Spezifikation ist noch in Arbeit. Name, Werte und Verhalten können sich ändern. Verwende die Eigenschaft deshalb nur für Messungen und nicht für die Programmlogik.

Siehe auch

Navigation.navigate() NavigationActivation.navigationType PerformanceSoftNavigation.paintTime PerformanceSoftNavigation.presentationTime PerformanceSoftNavigation.interactionId