v150 · Performance

SPA Navigation Observer

A mini SPA with three routes. Navigate between them — each click uses history.pushState. A PerformanceObserver watches for "soft-navigation" entries and logs them below in real time.

Feature detection: checking…
PerformanceObserver log 
// Watch for soft-navigation entries (Chrome 150+)
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.entryType); // "soft-navigation"
    console.log(entry.name);      // URL of the new route
    console.log(entry.startTime); // when the interaction started
    console.log(entry.duration);  // ms until DOM settled
  }
});

observer.observe({ type: "soft-navigation", buffered: true });

// Trigger a soft navigation (in your SPA router)
function navigateTo(url) {
  history.pushState({}, "", url);
  // ... update DOM ...
  // Browser detects: URL changed + DOM changed = soft navigation
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗