PerformanceSoftNavigation

Das PerformanceSoftNavigation Interface liefert Timing-Informationen über Soft-Navigations, wie sie durch clientseitiges Routing auf Single-Page-Application (SPA) Webseiten verwendet werden. Es wird ausgelöst, wenn ein Browser feststellt, dass eine Soft-Navigation stattgefunden hat.

Instanzen-Eigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceSoftNavigation.interactionId Schreibgeschützt: Die ID der Interaktion, die zur Soft-Navigation führte.
PerformanceSoftNavigation.navigationId Schreibgeschützt: Die ID der Navigation, die für diesen Seitenaufruf eindeutig ist.
PerformanceSoftNavigation.navigationType Schreibgeschützt: Der Typ der Navigation.
PerformanceSoftNavigation.paintTime Schreibgeschützt: Gibt den Zeitstempel zurück, wann die erste Renderphase endete und die Malphase begann.
PerformanceSoftNavigation.presentationTime Schreibgeschützt: Gibt den Zeitstempel zurück, wann die ersten gepainteten Pixel tatsächlich auf dem Bildschirm dargestellt wurden.

Es erweitert auch die folgenden PerformanceEntry Eigenschaften und qualifiziert und 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 Zeitstempel der Interaktion zurück, die zur Soft-Navigation führte.

Instanz-Methoden

Dieses Interface erbt auch Methoden von PerformanceEntry.

PerformanceSoftNavigation.getLargestInteractionContentfulPaint(): Gibt den aktuellen größten InteractionContentfulPaint für diese Soft-Navigation zurück.

Beschreibung

Das PerformanceSoftNavigation Interface wird durch den Browser gesteuert, der Folgendes beobachtet:

Eine vertrauenswürdige Benutzerinteraktion.
Ein sichtbarer, inhaltsträchtiger Paint als Ergebnis dieser Interaktion, der den Bildschirm aktualisiert.
Ein URL-Update in der Adressleiste des Benutzers als Ergebnis dieser Interaktion.

Dass der Browser dies bereitstellt, anstatt dass ein Routing-Framework eine API aufruft, um diesen Eintrag zu emittieren, ermöglicht es, die SPA-Leistungszeitmessung konsistent zu gestalten, unabhängig davon, wie unterschiedliche Anwendungen mit Navigationen umgehen (beispielsweise das URL-Update zu Beginn oder am Ende der Navigationsverarbeitung).

Das PerformanceSoftNavigation Interface ermöglicht es Entwicklern, SPA-Leistungsmetriken wie die folgenden zu messen:

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

Beispiele

Beobachtung von Soft-Navigationen

Im folgenden Beispiel wird ein PerformanceObserver verwendet, um die Soft-Navigationen zu protokollieren. Das buffered Flag wird verwendet, um auf Daten vor Erzeugung des Observers zuzugreifen.

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 });

Messung von Soft-Navigationen auf developer.chrome.com (2026)

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden