VisibilityStateEntry
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 VisibilityStateEntry-Schnittstelle liefert Zeitangaben zu Änderungen des Sichtbarkeitsstatus einer Seite, also dazu, wann ein Tab vom Vordergrund in den Hintergrund wechselt oder umgekehrt.
Damit lassen sich Sichtbarkeitsänderungen auf der Performance-Zeitleiste bestimmen und mit anderen Performance-Einträgen wie "first-contentful-paint" abgleichen (siehe PerformancePaintTiming).
Diese API erfasst zwei wesentliche Zeitpunkte, zu denen sich der Sichtbarkeitsstatus ändert:
visible: Der Zeitpunkt, zu dem die Seite sichtbar wird (also wenn ihr Tab in den Vordergrund wechselt).hidden: Der Zeitpunkt, zu dem die Seite ausgeblendet wird (also wenn ihr Tab in den Hintergrund wechselt).
Die Performance-Zeitleiste enthält immer einen "visibility-state"-Eintrag mit einem startTime-Wert von 0 und einem name, der den anfänglichen Sichtbarkeitsstatus der Seite angibt.
Hinweis:
Wie andere Performance-APIs erweitert auch diese API PerformanceEntry.
Instanzeigenschaften
Diese Schnittstelle hat keine eigenen Eigenschaften. Sie erweitert jedoch die Eigenschaften von PerformanceEntry, indem sie diese wie folgt konkretisiert und einschränkt:
PerformanceEntry.entryTypeSchreibgeschützt-
Gibt
"visibility-state"zurück. PerformanceEntry.nameSchreibgeschützt-
Gibt entweder
"visible"oder"hidden"zurück. PerformanceEntry.startTimeSchreibgeschützt-
Gibt den
Zeitstempelzurück, zu dem sich der Sichtbarkeitsstatus geändert hat. PerformanceEntry.durationSchreibgeschützt-
Gibt 0 zurück.
Instanzmethoden
Diese Schnittstelle hat keine Methoden.
Beispiele
Grundlegende Verwendung
Mit der folgenden Funktion lässt sich eine Tabelle aller "visibility-state"-Performance-Einträge in der Konsole ausgeben:
function getVisibilityStateEntries() {
const visibilityStateEntries =
performance.getEntriesByType("visibility-state");
console.table(visibilityStateEntries);
}
Sichtbarkeitsänderungen mit Paint-Zeitangaben abgleichen
Die folgende Funktion ruft Referenzen auf alle "visibility-state"-Einträge und den "first-contentful-paint"-Eintrag ab. Anschließend prüft sie mit Array.some(), ob einer der Sichtbarkeitseinträge mit dem Wert "hidden" vor dem ersten Contentful Paint aufgetreten ist:
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 |