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.
Instanz-Eigenschaften
Dieses Interface hat keine eigenen Eigenschaften, erweitert jedoch die Eigenschaften von PerformanceEntry durch folgende Qualifizierung und Einschränkung:
PerformanceEntry.entryTypeExperimentell-
Gibt
"visibility-state"zurück. PerformanceEntry.nameExperimentell-
Gibt entweder
"visible"oder"hidden"zurück. PerformanceEntry.startTimeExperimentell-
Gibt den
timestampzurück, zu dem die Sichtbarkeitszustandsänderung auftrat. PerformanceEntry.durationExperimentell-
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:
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:
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
Loading…