Signatur
Beschreibung
Die schreibgeschützte Eigenschaft navigationId eines PerformanceEntry nennt die Navigation, während der der Eintrag erfasst wurde. Normalerweise gehören alle Einträge eines Dokuments zu einer einzigen Navigation. Es gibt aber Fälle, in denen ein und dasselbe Dokument mehrere „Navigationen“ erlebt:
- Wiederherstellung aus dem Back/Forward-Cache (bfcache): Die Seite wird ohne Neuladen wieder angezeigt, gilt aber als neue Navigation.
- Soft Navigations: In Single-Page-Anwendungen ändert sich die URL über die History-API, ohne dass ein neues Dokument geladen wird. Die Unterstützung dafür ist noch experimentell.
Mit navigationId können Sie Einträge wie largest-contentful-paint, layout-shift, event oder resource genau der Navigation zuordnen, in der sie entstanden sind. Das ist besonders für die Messung von Web Vitals im Feld (RUM) wichtig. Ohne diese Zuordnung würden etwa Layout-Verschiebungen nach einer bfcache-Wiederherstellung fälschlich der ersten Seitenansicht zugerechnet.
Die Eigenschaft ist reine Lesedaten und nimmt keine Parameter an. Der Wert ist ein undurchsichtiger Bezeichner. Vergleichen Sie ihn nur auf Gleichheit und leiten Sie aus seinem Aufbau keine Reihenfolge oder Bedeutung ab.
Rückgabewert
undefined.Beispiele
Unterstützung prüfen und ID auslesen
const [nav] = performance.getEntriesByType('navigation');
if (nav && 'navigationId' in nav) {
console.log('Aktuelle Navigation:', nav.navigationId);
} else {
console.log('navigationId wird nicht unterstützt');
}Einträge nach Navigation gruppieren
const groupByNavigation = (entries) => {
const groups = new Map();
for (const entry of entries) {
const id = entry.navigationId ?? 'unbekannt';
if (!groups.has(id)) groups.set(id, []);
groups.get(id).push(entry);
}
return groups;
};
const groups = groupByNavigation(performance.getEntries());
for (const [id, list] of groups) {
console.log(`Navigation ${id}: ${list.length} Einträge`);
}CLS pro Navigation messen (inkl. bfcache)
const clsByNavigation = new Map();
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
if (entry.hadRecentInput) continue; // Verschiebungen direkt nach einer Nutzereingabe ignorieren
const id = entry.navigationId ?? 'standard';
clsByNavigation.set(id, (clsByNavigation.get(id) ?? 0) + entry.value);
}
});
observer.observe({ type: 'layout-shift', buffered: true });
window.addEventListener('pagehide', () => {
const report = Object.fromEntries(clsByNavigation);
navigator.sendBeacon('/rum', JSON.stringify(report));
});// Wichtig · Fallstricke
- Experimentell: Die Eigenschaft wird derzeit nur von Chromium-basierten Browsern unterstützt. Firefox und Safari kennen sie nicht. Prüfen Sie die Unterstützung vorab (
'navigationId' in entry) oder sehen Sie einen Ersatzwert vor (entry.navigationId ?? …). - Die Spezifikation hat sich geändert. Frühere Entwürfe sahen für den Wert eine Zahl vor. Behandeln Sie den Wert deshalb als undurchsichtigen Bezeichner und nutzen Sie ihn nur für Gleichheitsvergleiche. Er eignet sich nicht zum Sortieren.
- Einen eigenen
PerformanceNavigationTiming-Eintrag gibt es nach einer bfcache-Wiederherstellung nicht. Um die Wiederherstellung zu erkennen, werten Sie zusätzlich das Ereignispageshowmitevent.persistedaus. - Soft Navigations in Single-Page-Anwendungen werden nur erkannt, wenn der Browser das entsprechende Experiment aktiviert hat. Ohne Aktivierung bleibt die ID über Routenwechsel hinweg gleich.