v150 · Performance

Navigation Timeline

Each route click records a soft navigation event and plots it on a timeline — mimicking what browser DevTools shows under "Soft navigations" in the Performance panel. Navigate repeatedly to build the timeline.

Feature detection: checking…
Navigate between routes to build the timeline
# Route Start time Duration Entry type
No events yet
 
// Observe and record soft navigations
const navObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    const event = {
      type: entry.entryType,   // "soft-navigation"
      name: entry.name,        // the URL
      start: entry.startTime,  // ms since page load
      duration: entry.duration // ms until DOM settled
    };
    plotOnTimeline(event);
  }
});
navObserver.observe({ type: "soft-navigation", buffered: true });

see also

implementation reference

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