Урок: журнал смены видимости вкладки

Назначение

Небольшой журнал помогает проверить, какие события видимости действительно получает страница. В уроке записи хранятся только в памяти учебной вкладки и никуда не отправляются.

Как это работает

Код устанавливает обработчик, записывает начальное состояние и добавляет новые строки при visibilitychange. Функция завершения снимает обработчик и выводит собранную таблицу. Запускайте пример в собственной странице один раз за опыт.

Пример

const rows = [];
function recordVisibility() {
  rows.push({time:Math.round(performance.now()), state:document.visibilityState});
}
document.addEventListener("visibilitychange", recordVisibility);
recordVisibility();
function finishVisibilityTest() {
  document.removeEventListener("visibilitychange", recordVisibility);
  console.table(rows);
}

Что должно получиться

После переключения вкладок и вызова finishVisibilityTest видна последовательность зафиксированных состояний с относительным временем. Performance.now здесь используется для порядка событий, а не как календарная дата.

Граница применения и частая ошибка

Такой журнал не измеряет внимание человека и не показывает, какую часть статьи он видел. Не оставляйте массив бесконечно расти в рабочем интерфейсе. Закрытие вкладки может прервать опыт без выполнения дополнительного завершающего кода.

Самостоятельная проверка

Переключите вкладку дважды, затем сверните и восстановите окно. Завершите опыт и сравните записи. Отдельно проверьте потерю фокуса без скрытия документа; не объединяйте blur и hidden в одно понятие.

Связанные материалы

• Исходник и DOM
• Консоль
• Повторная проверка