PerformanceSoftNavigation: getLargestInteractionContentfulPaint() Methode

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die Methode getLargestInteractionContentfulPaint() des PerformanceSoftNavigation Interfaces gibt das derzeit größte InteractionContentfulPaint zurück, das für diese Soft-Navigation relevant ist.

Einige Single Page Applications (SPAs) könnten zuerst rendern und danach die URL aktualisieren. Dennoch möchten Entwickler, dass diese Renderings in die Messung des Largest Contentful Paint (LCP) für Soft-Navigations einbezogen werden. Da die Interaktion mit jedem Rendering auch zu einer URL-Aktualisierung und somit zu einer Soft-Navigation zu einem späteren Zeitpunkt führen könnte, könnte es schwierig sein, dies zu messen, ohne möglicherweise eine temporäre Referenz zu jedem Interaktions-LCP zu speichern, falls sie benötigt wird.

Die Methode getLargestInteractionContentfulPaint() erspart es den Entwicklern, dies zu tun, indem sie eine Möglichkeit bietet, das neueste und größte InteractionContentfulPaint für die Soft-Navigation abzurufen.

Sie ist als Methode und nicht als statische Eigenschaft definiert, da sie den neuesten und größten Eintrag zurückgibt und daher im Laufe der Zeit unterschiedliche Ergebnisse liefern kann, wenn nach der Soft-Navigation größere InteractionContentfulPaint-Einträge aufgezeichnet werden.

Syntax

getLargestInteractionContentfulPaint()

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

Um einen JSON-String zu erhalten, können Sie JSON.stringify(entry) direkt verwenden; es wird automatisch toJSON() aufrufen.