VisibilityStateEntry

Интерфейс VisibilityStateEntry предоставляет временные метки изменений состояния видимости страницы, т. е. когда вкладка переключается с фонового на передний или наоборот.

Это можно использовать для точного определения изменений видимости на временной шкале производительности и сопоставления их с другими записями производительности, такими как "первое отображение контента" (см. PerformancePaintTiming).

Существует две ключевые временные метки изменений состояния видимости, которые сообщает этот API:

• visible: Время, когда страница становится видимой (т. е. когда её вкладка переходит в фокус).
• hidden: Время, когда страница скрывается (т. е. когда её вкладка переходит на задний план).

Временная шкала производительности всегда будет содержать запись "visibility-state" с startTime 0 и name, представляющей начальное состояние видимости страницы.

Этот интерфейс не имеет свойств, но он расширяет свойства PerformanceEntry, уточняя и ограничивая их следующим образом:

PerformanceEntry.entryType Экспериментально

Возвращает "visibility-state".

PerformanceEntry.name Экспериментально

Возвращает либо "visible" , либо "hidden".

PerformanceEntry.startTime Экспериментально

Возвращает timestamp момент изменения состояния видимости.

PerformanceEntry.duration Экспериментально

Возвращает 0.

Этот интерфейс не имеет методов.

Следующая функция может использоваться для записи таблицы всех "visibility-state" записей производительности в консоль:

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

Нижеприведенная функция получает ссылку на все "visibility-state" записи и запись "first-contentful-paint", а затем использует Array.some() для проверки, произошли ли какие-либо "hidden" записи видимости до первого отображения контента:

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

API видимости страницы