PerformanceSoftNavigation
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das PerformanceSoftNavigation-Interface bietet Timing-Informationen über Soft-Navigationen, wie sie von clientseitigem Routing auf Single-Page-Application (SPA)-Seiten verwendet werden. Es wird erzeugt, wenn ein Browser eine Soft-Navigation beobachtet, die stattgefunden hat.
Instanz-Eigenschaften
Dieses Interface definiert direkt die folgenden Eigenschaften:
-
Die ID der Navigation, einzigartig für dieses Seiten-Laden.
-
Der Typ der Navigation.
-
Gibt den
Zeitstempelzurück, wann die erste Render-Phase endete und die Paint-Phase begann. -
Gibt den
Zeitstempelzurück, wann die ersten gezeichneten Pixel tatsächlich auf dem Bildschirm angezeigt wurden.
Es erweitert auch die folgenden PerformanceEntry-Eigenschaften, qualifiziert und beschränkt sie wie beschrieben:
PerformanceEntry.entryTypeSchreibgeschützt-
Gibt
"soft-navigation"zurück. PerformanceEntry.durationSchreibgeschützt-
Gibt das Ergebnis von
PerformanceSoftNavigation.presentationTime-PerformanceEntry.startTimezurück. PerformanceEntry.nameSchreibgeschützt-
Die neue URL, zu der navigiert wurde.
PerformanceEntry.startTimeSchreibgeschützt-
Gibt den
Zeitstempelder Interaktion zurück, die zur Soft-Navigation führte.
Instanz-Methoden
-
Gibt das aktuelle größte
InteractionContentfulPaintfür diese Soft-Navigation zurück. -
Überschreibt die
PerformanceEntry.toJSON()-Methode, um eine JSON-Darstellung desPerformanceSoftNavigation-Objekts zu liefern.
Beschreibung
Das PerformanceSoftNavigation-Interface wird vom Browser gesteuert, der Folgendes beobachtet:
- Eine vertrauenswürdige Benutzerinteraktion.
- Eine sichtbare, inhaltliche Darstellung als Folge dieser Interaktion, die den Bildschirm aktualisiert.
- Eine URL-Aktualisierung in der Adressleiste des Benutzers als Folge dieser Interaktion.
Dass der Browser dies bereitstellt, anstatt dass ein Routing-Framework eine API aufruft, um diesen Eintrag zu erzeugen, ermöglicht eine konsistente Messung der SPA-Leistungszeiten, unabhängig davon, wie verschiedene Anwendungen Navigationen handhaben (zum Beispiel das Aktualisieren der URL am Anfang oder am Ende der Navigationsverarbeitung).
Das PerformanceSoftNavigation-Interface ermöglicht Entwicklern die Messung von SPA-Leistungsmetriken wie:
- First Contentful Paint (FCP): Kann als erstes Rendering ab der Soft-Navigationszeit gemessen werden.
- Largest Contentful Paint (LCP): Kann über das
InteractionContentfulPaintfü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 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 });
Spezifikationen
| Spezifikation |
|---|
| Soft Navigations and Interaction Contentful Paint # sec-interface |
Browser-Kompatibilität
Siehe auch
- Messung von Soft-Navigationen auf developer.chrome.com (2026)