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.
Die PerformanceSoftNavigation-Schnittstelle stellt Timing-Informationen zu Soft-Navigationen bereit, wie sie beim clientseitigen Routing auf Websites von Single-Page-Anwendungen (SPAs) verwendet werden. Ein entsprechender Eintrag wird erzeugt, wenn ein Browser feststellt, dass eine Soft-Navigation stattgefunden hat.
Instanzeigenschaften
Diese Schnittstelle definiert direkt die folgenden Eigenschaften:
-
Die ID der Navigation, die innerhalb dieses Seitenladevorgangs eindeutig ist.
-
Der Typ der Navigation.
-
Gibt den
Zeitstempelzurück, zu dem die erste Rendering-Phase endete und die Paint-Phase begann. -
Gibt den
Zeitstempelzurück, zu dem die ersten gezeichneten Pixel tatsächlich auf dem Bildschirm dargestellt wurden.
Sie erweitert außerdem die folgenden Eigenschaften von PerformanceEntry, wobei diese wie beschrieben konkretisiert und eingeschränkt werden:
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.
Instanzmethoden
-
Gibt den aktuellen größten
InteractionContentfulPaintfür diese Soft-Navigation zurück. -
Gibt ein JSON-serialisierbares, einfaches Objekt zurück, das das
PerformanceSoftNavigation-Objekt repräsentiert. Die Methode wird automatisch vonJSON.stringify()aufgerufen.
Beschreibung
Die PerformanceSoftNavigation-Schnittstelle basiert darauf, dass der Browser Folgendes beobachtet:
- Eine vertrauenswürdige Benutzerinteraktion.
- Ein sichtbares Contentful Paint, bei dem der Bildschirm infolge dieser Interaktion aktualisiert wird.
- 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 konsistente Messung der SPA-Performance-Timings – unabhängig davon, wie verschiedene Anwendungen Navigationen handhaben (beispielsweise ob sie die URL zu Beginn oder am Ende der Navigationsverarbeitung aktualisieren).
Mit der PerformanceSoftNavigation-Schnittstelle 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
InteractionContentfulPaintfü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-Navigationen beobachten
Im folgenden Beispiel wird ein PerformanceObserver verwendet, um Soft-Navigationen zu protokollieren. Das buffered-Flag wird verwendet, um auf Daten aus der Zeit 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
- Soft-Navigationen messen auf developer.chrome.com (2026)