PerformanceSoftNavigation

Instanzeigenschaften

Diese Schnittstelle definiert unmittelbar die folgenden Eigenschaften:

PerformanceSoftNavigation.interactionId Schreibgeschützt

Die ID der Interaktion, die zur Soft Navigation geführt hat.

PerformanceSoftNavigation.navigationType Schreibgeschützt

Der Typ der Navigation.

PerformanceSoftNavigation.paintTime Schreibgeschützt

Gibt den timestamp zurück, zu dem die erste Rendering-Phase endete und die Paint-Phase begann.

PerformanceSoftNavigation.presentationTime Schreibgeschützt

Gibt den timestamp zurück, zu dem die ersten gerenderten Pixel tatsächlich auf dem Bildschirm dargestellt wurden.

Außerdem übernimmt sie die folgenden Eigenschaften von PerformanceEntry und konkretisiert oder beschränkt sie wie beschrieben:

PerformanceEntry.entryType Schreibgeschützt

Gibt "soft-navigation" zurück.

PerformanceEntry.duration Schreibgeschützt

Gibt das Ergebnis von PerformanceSoftNavigation.presentationTime - PerformanceEntry.startTime zurück.

PerformanceEntry.name Schreibgeschützt

Die neue URL, zu der navigiert wurde.

PerformanceEntry.startTime Schreibgeschützt

Gibt den timestamp der Interaktion zurück, die zur Soft Navigation geführt hat.

Instanzmethoden

PerformanceSoftNavigation.getLargestInteractionContentfulPaint()

Gibt den derzeit größten InteractionContentfulPaint für diese Soft Navigation zurück.

PerformanceSoftNavigation.toJSON()

Gibt ein JSON-serialisierbares einfaches Objekt zurück, das das Objekt PerformanceSoftNavigation repräsentiert. Wird automatisch von JSON.stringify() aufgerufen.

Beschreibung

Die Schnittstelle PerformanceSoftNavigation basiert darauf, dass der Browser Folgendes beobachtet:

• Eine vertrauenswürdige Benutzerinteraktion.
• Einen sichtbaren Contentful Paint, der daraus resultiert, dass diese Interaktion den Bildschirminhalt aktualisiert.
• Eine Aktualisierung der URL in der Adressleiste des Benutzers infolge dieser Interaktion.

Dass der Browser diesen Eintrag bereitstellt, statt dass ein Routing-Framework eine API aufruft, um ihn zu erzeugen, ermöglicht eine einheitliche Messung der Zeitwerte für die SPA-Performance – unabhängig davon, wie verschiedene Anwendungen Navigationen handhaben (beispielsweise, ob sie die URL zu Beginn oder am Ende der Navigationsverarbeitung aktualisieren).

Mit der Schnittstelle PerformanceSoftNavigation können Entwickler SPA-Performance-Metriken wie die folgenden messen:

• First Contentful Paint (FCP): Kann als erster Paint ab dem Zeitpunkt der Soft Navigation gemessen werden.
• Largest Contentful Paint (LCP): Kann über den InteractionContentfulPaint für die Soft Navigation gemessen werden.
• Cumulative Layout Shift (CLS): Kann zwischen Navigationen berechnet werden.
• Interaction to Next Paint (INP): Kann zwischen Navigationen berechnet werden.

Beispiele

Soft Navigations beobachten

Im folgenden Beispiel wird ein PerformanceObserver verwendet, um Soft Navigations zu protokollieren. Das Flag buffered ermöglicht den Zugriff auf Daten, die vor der Erstellung des Observers erfasst wurden.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log("Soft Nav:", entry.startTime, entry.name);
  }
});
observer.observe({ type: "soft-navigation", buffered: true });

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Soft Navigations messen auf developer.chrome.com (2026)