PerformanceEntry: navigationId-Eigenschaft

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die schreibgeschützte Eigenschaft navigationId des PerformanceEntry-Interfaces gibt die ID der Navigation zurück, unter der dieses Rendering stattgefunden hat.

Wert

Ein Integer, der mit einem entsprechenden PerformanceNavigationTiming- oder PerformanceSoftNavigation-Eintrag abgeglichen werden kann.

Beschreibung

Durch die Verwendung von PerformanceSoftNavigation-Einträgen können Sie messen, wann Soft Navigations stattgefunden haben, ohne in den Code einzugreifen, der die Soft Navigation durchgeführt hat.

Dies ermöglicht die Unterteilung der Leistungstimeline, die von den Performance-APIs verwendet wird, um Leistungskennzahlen der Navigation zuzuschreiben, unter der sie aufgetreten sind. Da Leistungseinträge im Nachhinein ausgegeben werden und verzögert sein können, können sie sich auf frühere Navigationen beziehen; Sie können nicht davon ausgehen, dass sie sich auf die aktuelle URL beziehen. Die navigationId gibt an, unter welcher Navigation der Eintrag stattgefunden hat.

`navigationId` und Messung von Soft Navigation Largest Contentful Paints

Während Soft Navigations haben Renderings, die vor der Aktualisierung der URL passieren, eine navigationId, die sich auf die Position bezieht, von der navigiert wird. Bei der Messung des Largest Contentful Paint (LCP) einer laufenden Soft Navigation möchten Sie es wahrscheinlich mit der Position verknüpfen, zu der navigiert wird. Für den LCP-Fall sind PerformanceSoftNavigation.getLargestInteractionContentfulPaint() und InteractionContentfulPaint.interactionId effektiver, um alle relevanten Renderings unabhängig von der navigationId bei der Berechnung dieser Metrik zu berücksichtigen.

Beispiele

Protokollierung der `navigationId` der Soft Navigation

Dieses Beispiel verwendet einen PerformanceObserver, um neue soft-navigation Leistungseinträge zu protokollieren, während sie in der Leistungstimeline des Browsers erfasst werden. Die Option buffered wird verwendet, um auf Einträge vor der Erstellung des Observers zuzugreifen.

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log("Soft Nav:", entry.startTime, entry.navigationId);
  }
});
observer.observe({ type: "soft-navigation", buffered: true });