VisibilityStateEntry

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

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

Es gibt zwei wichtige Zeiten für Änderungen des Sichtbarkeitsstatus, über die diese API berichtet:

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

Die Performance-Zeitleiste wird immer einen "visibility-state"-Eintrag mit einem startTime von 0 und einem name, das den initialen Sichtbarkeitsstatus der Seite repräsentiert, enthalten.

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

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",
  );
}