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

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

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

Когда пользователь сворачивает окно, переключается на другую вкладку или документ полностью скрыт другим окном, API отправляет событие visibilitychange, чтобы сообщить слушателям об изменении состояния страницы. Вы можете обнаружить событие и выполнить некоторые действия или повести себя иначе. Например, если ваше веб-приложение воспроизводит видео, оно может приостановить воспроизведение видео, когда пользователь переводит вкладку в фоновый режим, и возобновить воспроизведение, когда пользователь возвращается к вкладке. Пользователь не потеряет своё место в видео, звуковая дорожка видео не помешает звуку на новой активной вкладке, и пользователь не пропустит ни одной части видео в это время.

Состояния видимости <iframe> совпадают с состоянием родительского документа. Скрытие <iframe> с помощью свойств CSS (например, display: none;) не вызывает событий видимости или не изменяет состояние документа, содержащегося в фрейме.

Рассмотрим несколько примеров использования API видимости страницы.

• Сайт имеет изображение-карусель, которая не должна переходить к следующему слайду, если пользователь не просматривает страницу
• Приложение, отображающее информационную панель, не должно запрашивать обновления у сервера, когда страница не видна
• Сайт хочет отключить звук, когда устройство находится в режиме ожидания (пользователь нажимает кнопку питания, чтобы выключить экран)

Разработчики исторически использовали несовершенные прокси для обнаружения этого. Например, наблюдение за событиями blur и focus в окне помогает узнать, когда ваша страница не является активной, но это не говорит вам, что ваша страница фактически скрыта для пользователя. API видимости страницы решает эту проблему.

Помимо API видимости страницы, агенты пользователя обычно применяют ряд политик для смягчения влияния на производительность фоновых или скрытых вкладок. Они могут включать:

• Большинство браузеров прекращают отправку обращений requestAnimationFrame() в фоновые вкладки или скрытые <iframe>, чтобы улучшить производительность и время автономной работы.

• Таймеры, такие как setTimeout(), ограничены в фоновых/неактивных вкладках, чтобы улучшить производительность. См. Причины задержек, превышающих заданные, для получения дополнительной информации.

• Браузеры реализуют ограничение по бюджету для таймаутов фоновых задач. Этот механизм действует аналогично в современных браузерах, подробности приведены ниже:

  • В Firefox окна в фоновых вкладках имеют свой собственный временной бюджет в миллисекундах — максимальное и минимальное значения соответственно +50 мс и -150 мс. Chrome очень похож, за исключением того, что бюджет задается в секундах.
  • Окна подвергаются ограничению через 30 секунд, с теми же правилами задержки таймаута, что и для таймеров окна (снова, см. Причины задержек, превышающих заданные). В Chrome это значение составляет 10 секунд.
  • Задачи таймера разрешены только при ненулевом бюджете.
  • После завершения работы кода таймера продолжительность времени, затраченная на выполнение, вычитается из бюджета таймаута окна.
  • Бюджет восполняется со скоростью 10 мс в секунду, как в Firefox, так и в Chrome.

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

• Вкладки, воспроизводящие аудио, считаются фоновыми и не ограничены.
• Вкладки, выполняющие код, использующий реальные сетевые подключения (WebSockets и WebRTC), не ограничены, чтобы избежать истечения срока действия этих подключений и их неожиданного закрытия.
• Процессы IndexedDB также не ограничены, чтобы избежать таймаутов.

API видимости страницы добавляет следующие свойства к интерфейсу Document:

Document.hidden Только для чтения

Возвращает true если страница находится в состоянии, которое считается скрытым для пользователя, и false в противном случае.

Document.visibilityState Только для чтения

Строка, указывающая текущее состояние видимости документа. Возможные значения:

visible

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

hidden

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

API видимости страницы добавляет следующие события к интерфейсу Document:

visibilitychange

Срабатывает, когда содержимое вкладки становится видимым или скрытым.

Этот пример приостанавливает воспроизведение аудио, когда страница скрыта, и возобновляет воспроизведение, когда страница снова становится видимой. Элементы управления <audio> позволяют пользователю переключаться между воспроизведением и паузой аудио. Логическое значение playingOnHide используется для предотвращения воспроизведения аудио, если страница меняет состояние на visible, но медиа не воспроизводилось при скрытии страницы.

HTML

<audio
  controls
  src="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"></audio>

JavaScript

const audio = document.querySelector("audio");

let playingOnHide = false;

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Page became visible! Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

Результат

• Document.visibilityState
• Document.hidden
• Определение видимости элементов с помощью API Intersection Observer