PerformanceSoftNavigation

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Das PerformanceSoftNavigation-Interface bietet Timing-Informationen über Soft-Navigations, wie sie durch clientseitiges Routing auf Single-Page-Application (SPA)-Seiten verwendet werden. Es wird ausgegeben, wenn ein Browser erkennt, dass eine Soft-Navigation stattgefunden hat.

Instanzeigenschaften

Dieses Interface definiert direkt die folgenden Eigenschaften:

PerformanceSoftNavigation.interactionId Schreibgeschützt: Die ID der Navigation, die für diese Seitenladung einzigartig ist.
PerformanceSoftNavigation.navigationType Schreibgeschützt: Der Typ der Navigation.
PerformanceSoftNavigation.paintTime Schreibgeschützt: Gibt den Zeitstempel zurück, wann die erste Rendering-Phase endete und die Malphase begann.
PerformanceSoftNavigation.presentationTime Schreibgeschützt: Gibt den Zeitstempel zurück, wann die ersten gepixelten Bilder tatsächlich auf dem Bildschirm gezeichnet wurden.

Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, indem es sie qualifiziert und einschränkt, 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.

Instanzmethoden

PerformanceSoftNavigation.getLargestInteractionContentfulPaint(): Gibt die aktuelle größte InteractionContentfulPaint für diese Soft-Navigation zurück.
PerformanceSoftNavigation.toJSON(): Überschreibt die PerformanceEntry.toJSON()-Methode, um eine JSON-Darstellung des PerformanceSoftNavigation-Objekts zurückzugeben.

Beschreibung

Das PerformanceSoftNavigation-Interface wird vom Browser durch die folgenden Beobachtungen gesteuert:

Eine vertrauenswürdige Benutzerinteraktion.
Ein sichtbarer, inhaltlicher Malvorgang als Ergebnis dieser Interaktion, die den Bildschirm aktualisiert.
Ein URL-Update in der Adressleiste des Benutzers als Ergebnis dieser Interaktion.

Dadurch, dass der Browser dies bereitstellt, anstatt dass ein Routing-Framework eine API aufruft, um diesen Eintrag auszugeben, kann die Leistungsmessung von SPAs konsistent durchgeführt werden, unabhängig davon, wie verschiedene Anwendungen die Navigationen behandeln (z.B. URL-Aktualisierung zu Beginn oder am Ende der Navigationsverarbeitung).

Das PerformanceSoftNavigation-Interface ermöglicht es Entwicklern, Leistungsmetriken von SPAs zu messen, wie:

First Contentful Paint (FCP): Kann als das erste Rendern 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 der Erstellung des Beobachters 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 });

Spezifikationen

Spezifikation
Soft Navigations and Interaction Contentful Paint # sec-interface

Browser-Kompatibilität

Siehe auch

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