VisibilityStateEntry

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Das VisibilityStateEntry Interface bietet Zeitmessungen für Änderungen des Sichtbarkeitszustands einer Seite, d.h. wenn ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.

Dies kann verwendet werden, um Sichtbarkeitsänderungen auf der Leistungstimeline zu identifizieren und sie mit anderen Leistungseinträgen wie "first-contentful-paint" zu vergleichen (siehe PerformancePaintTiming).

Es gibt zwei wichtige Sichtbarkeitszustandsänderungszeiten, die diese API meldet:

  • visible: Die Zeit, zu der die Seite sichtbar wird (d.h. wenn ihr Tab in den Vordergrund wechselt).
  • hidden: Die Zeit, zu der die Seite verborgen wird (d.h. wenn ihr Tab in den Hintergrund wechselt).

Die Leistungstimeline wird immer einen "visibility-state"-Eintrag mit einem startTime von 0 und einem name enthalten, das den anfänglichen Sichtbarkeitszustand der Seite repräsentiert.

Hinweis: Wie andere Leistungs-APIs erweitert diese API PerformanceEntry.

PerformanceEntry VisibilityStateEntry

Instanz-Eigenschaften

Dieses Interface hat keine eigenen Eigenschaften, erweitert jedoch die Eigenschaften von PerformanceEntry durch folgende Qualifizierung und Einschränkung:

PerformanceEntry.entryType

Gibt "visibility-state" zurück.

PerformanceEntry.name

Gibt entweder "visible" oder "hidden" zurück.

PerformanceEntry.startTime

Gibt den timestamp zurück, zu dem die Sichtbarkeitszustandsänderung auftrat.

PerformanceEntry.duration

Gibt 0 zurück.

Instanz-Methoden

Dieses Interface hat keine Methoden.

Beispiele

Grundlegende Verwendung

Die folgende Funktion könnte verwendet werden, um eine Tabelle aller "visibility-state"-Leistungseinträge in die Konsole zu protokollieren:

js
function getVisibilityStateEntries() {
  const visibilityStateEntries =
    performance.getEntriesByType("visibility-state");
  console.table(visibilityStateEntries);
}

Korrelation von Sichtbarkeitszustandsänderungen mit der Malzeit

Die folgende Funktion erhält eine Referenz zu allen "visibility-state"-Einträgen und dem "first-contentful-paint"-Eintrag und verwendet Array.some(), um zu testen, ob einer der "hidden"-Sichtbarkeitseinträge vor dem ersten Contentful Paint auftrat:

js
function wasHiddenBeforeFirstContentfulPaint() {
  const fcpEntry = performance.getEntriesByName("first-contentful-paint")[0];
  const visibilityStateEntries =
    performance.getEntriesByType("visibility-state");
  return visibilityStateEntries.some(
    (e) => e.startTime < fcpEntry.startTime && e.name === "hidden",
  );
}

Spezifikationen

Specification
HTML
# the-visibilitystateentry-interface

Browser-Kompatibilität

Siehe auch

Page Visibility API