VisibilityStateEntry

Eingeschrnkt verfgbar

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.

Mehr erfahren
Vollstndige Kompatibilitt anzeigen

Experimentell: Dies ist eine experimentelle Technologie
berprfen Sie die Browser-Kompatibilittstabelle sorgfltig vor der Verwendung auf produktiven Webseiten.

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

Dies kann verwendet werden, um Sichtbarkeitsnderungen auf der Leistungstimeline zu identifizieren und sie mit anderen Leistungseintrgen wie "first-contentful-paint" zu vergleichen (siehe PerformancePaintTiming).

Es gibt zwei wichtige Sichtbarkeitszustandsnderungszeiten, 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 anfnglichen Sichtbarkeitszustand der Seite reprsentiert.

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 Einschrnkung:

PerformanceEntry.entryType: Gibt "visibility-state" zurck.
PerformanceEntry.name: Gibt entweder "visible" oder "hidden" zurck.
PerformanceEntry.startTime: Gibt den timestamp zurck, zu dem die Sichtbarkeitszustandsnderung auftrat.
PerformanceEntry.duration: Gibt 0 zurck.

Instanz-Methoden

Dieses Interface hat keine Methoden.

Beispiele

Grundlegende Verwendung

Die folgende Funktion knnte verwendet werden, um eine Tabelle aller "visibility-state"-Leistungseintrge in die Konsole zu protokollieren:

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

Korrelation von Sichtbarkeitszustandsnderungen mit der Malzeit

Die folgende Funktion erhlt eine Referenz zu allen "visibility-state"-Eintrgen und dem "first-contentful-paint"-Eintrag und verwendet Array.some(), um zu testen, ob einer der "hidden"-Sichtbarkeitseintrge vor dem ersten Contentful Paint auftrat:

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

Spezifikation
HTML # the-visibilitystateentry-interface

Browser-Kompatibilitt

Siehe auch

Page Visibility API

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden

Performance APIs
VisibilityStateEntry
Vererbung
1. PerformanceEntry
Verwandte Seiten fr Performance API
Anleitungen
1. Leistungsdaten
2. Hochprzise Zeitmessung
3. Lange Animationsrahmen-Timing
4. Resource timing
5. Navigation timing
6. User timing
7. Server Timing
8. berwachen von bfcache-Blockierungsgrnden