Signatur
Beschreibung
Die schreibgeschützte Eigenschaft interactionId eines PerformanceSoftNavigation-Eintrags (Eintragstyp "soft-navigation") verknüpft eine weiche Navigation mit der Nutzerinteraktion, die sie ausgelöst hat. Eine weiche Navigation ist ein Seitenwechsel in einer Single-Page-Application (SPA), bei dem kein neues Dokument geladen wird. Der Browser erkennt ihn heuristisch: Eine Nutzerinteraktion (Klick, Tastendruck) führt zu einer URL-Änderung über die History-API und zu einer sichtbaren DOM-Änderung.
Der Wert entspricht der interactionId des zugehörigen PerformanceEventTiming-Eintrags (Eintragstyp "event"). So lässt sich genau feststellen, welcher Klick oder Tastendruck zur Navigation geführt hat. Außerdem kann man Kennzahlen wie die Eingabeverzögerung oder die Verarbeitungsdauer dieser Interaktion der jeweiligen Route zuordnen.
Typische Einsatzfälle sind Real User Monitoring (RUM) für SPAs: Metriken wie INP oder LCP lassen sich pro virtueller Seitenansicht erfassen, statt sie für die gesamte Lebensdauer des Dokuments zusammenzufassen.
Rückgabewert
interactionId des auslösenden PerformanceEventTiming-Eintrags.Beispiele
Weiche Navigationen samt Interaktions-ID protokollieren
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`Soft-Navigation zu ${entry.name}`);
console.log(`Ausgelöst durch Interaktion #${entry.interactionId}`);
}
});
// buffered: true liefert auch Einträge, die schon vor dem Registrieren entstanden sind
observer.observe({ type: 'soft-navigation', buffered: true });Soft-Navigation mit dem auslösenden Event-Timing verknüpfen
const interactions = new Map();
// Event-Timing-Einträge nach interactionId sammeln
new PerformanceObserver((list) => {
for (const e of list.getEntries()) {
if (e.interactionId) interactions.set(e.interactionId, e);
}
}).observe({ type: 'event', durationThreshold: 16, buffered: true });
new PerformanceObserver((list) => {
for (const nav of list.getEntries()) {
const trigger = interactions.get(nav.interactionId);
if (trigger) {
console.log(
`${nav.name}: ausgelöst durch "${trigger.name}", ` +
`Dauer ${Math.round(trigger.duration)} ms`
);
}
}
}).observe({ type: 'soft-navigation', buffered: true });RUM-Beacon mit Feature-Erkennung senden
const supported = PerformanceObserver.supportedEntryTypes?.includes('soft-navigation');
if (supported) {
new PerformanceObserver((list) => {
for (const nav of list.getEntries()) {
const payload = JSON.stringify({
url: nav.name,
interactionId: nav.interactionId,
start: Math.round(nav.startTime)
});
navigator.sendBeacon('/rum', payload);
}
}).observe({ type: 'soft-navigation' });
} else {
console.log('Soft-Navigation-Messung wird nicht unterstützt');
}// Wichtig · Fallstricke
- Experimentell:
PerformanceSoftNavigationgibt es derzeit nur in Chromium-basierten Browsern, und zwar hinter dem Flagchrome://flags/#soft-navigation-heuristicsoder im Rahmen eines Origin Trials. Firefox und Safari unterstützen die Schnittstelle nicht. Die Spezifikation kann sich noch ändern. Prüfe die Unterstützung immer vorher überPerformanceObserver.supportedEntryTypes. - Die Erkennung beruht auf einer Heuristik. Ändert sich die URL ohne Nutzerinteraktion (z. B. durch
history.pushState()in einem Timer) oder bleibt eine sichtbare DOM-Änderung aus, entsteht kein Eintrag. - Einen passenden
PerformanceEventTiming-Eintrag findest du nur, wenn du den Typ"event"beobachtest und die Interaktion dendurationThresholdüberschreitet. Der Standardwert liegt bei 104 ms, das Minimum bei 16 ms. Kürzere Interaktionen tauchen nicht auf. - Die Interaktions-IDs sind nicht fortlaufend (1, 2, 3 …), sondern steigen in unregelmäßigen Abständen an. Sie sind nur innerhalb eines Dokuments eindeutig.