PerformanceSoftNavigation
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Das PerformanceSoftNavigation-Interface liefert Zeitinformationen über softe Navigationen, wie sie von clientseitigem Routing auf Single-Page-Application (SPA)-Seiten verwendet werden. Es wird ausgegeben, wenn ein Browser beobachtet, dass eine softe Navigation stattgefunden hat.
Instanzeigenschaften
Dieses Interface definiert direkt die folgenden Eigenschaften:
-
Die ID der Navigation, die für diesen Seitenaufruf einzigartig ist.
-
Der Typ der Navigation.
-
Gibt den
Zeitstempelzurück, wann die erste Renderphase endete und die Malphase begann. -
Gibt den
Zeitstempelzurück, wann die ersten gemalten Pixel tatsächlich auf dem Bildschirm gezeichnet wurden.
Es erweitert außerdem 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 soften Navigation führte.
Instanzmethoden
-
Gibt den aktuellen größten
InteractionContentfulPaintfür diese softe Navigation zurück. -
Überschreibt die
PerformanceEntry.toJSON()-Methode, um eine JSON-Repräsentation desPerformanceSoftNavigation-Objekts zurückzugeben.
Beschreibung
Das PerformanceSoftNavigation-Interface wird durch den Browser getrieben, der Folgendes beobachtet:
- Eine vertrauenswürdige Benutzerinteraktion.
- Einen sichtbaren, contentreichen Paint als Ergebnis dieser Interaktion, die den Bildschirm aktualisiert.
- Ein URL-Update in der Adressleiste des Benutzers als Resultat dieser Interaktion.
Wenn der Browser dies bereitstellt, anstatt dass ein Routing-Framework eine API aufruft, um diesen Eintrag auszugeben, können SPA-Leistungszeiten konsistent gemessen werden, unabhängig davon, wie verschiedene Anwendungen Navigationen handhaben (zum Beispiel das Aktualisieren der URL am Beginn oder Ende der Navigationsverarbeitung).
Das PerformanceSoftNavigation-Interface ermöglicht Entwicklern die Messung von SPA-Leistungsmetriken wie:
- First Contentful Paint (FCP): Kann als erster Paint ab der soften Navigationszeit gemessen werden.
- Largest Contentful Paint (LCP): Kann über das
InteractionContentfulPaintfür die softe Navigation gemessen werden. - Cumulative Layout Shift (CLS): Kann zwischen Navigierungen berechnet werden.
- Interaction to Next Paint (INP): Kann zwischen Navigierungen berechnet werden.
Beispiele
Beobachten von soften Navigationen
Im folgenden Beispiel wird ein PerformanceObserver verwendet, um die soften 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 soften Navigationen auf developer.chrome.com (2026)