API відображення сторінки

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію visibilitychange (en-US), щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

Стан видимості <iframe> збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як display: none; (en-US)) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

Випадки використання

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

  • На сайті є карусель зображень, яка не повинна переходити до наступного слайду, якщо користувач не переглядає сторінку.
  • Додаток, що показує інформаційну панель, не повинен опитувати сервер на оновлення, коли сторінку не видно.
  • Сторінка хоче визначити, коли до неї мають доступ, щоб вона могла точно підрахувати кількість переглядів.
  • Сайт хоче відключити звуки, коли пристрій перебуває в режимі очікування або користувач натискає кнопку живлення, щоб вимкнути екран.

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд blur (en-US) і focus (en-US) подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

Примітка: У той час як onblur (en-US) та onfocus (en-US) скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

Політика позиціонування, як сприяння продуктивності фонової сторінки

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

  • Більшість браузерів припиняють посилати requestAnimationFrame () (en-US) зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.
  • Такі таймери, як setTimeout (), гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  Причини затримок, що перевищують встановлені.
  • Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
    • У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.
    • Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ Причини затримок довше, ніж зазначено).  У Chrome це значення дорівнює 10 секундам.
    • Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.
    • Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.
    • Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.

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

  • Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.
  • Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (WebSockets та WebRTC) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.
  • IndexedDB процеси також залишаються непорушними для уникнення тайм-аутів.

Приклад

Подивіться живий приклад (відео зі звуком).

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

   // Встановіть ім'я властивості hidden і події зміни для видимості.

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}

var videoElement = document.getElementById("videoElement");

// Якщо сторінка прихована, зупиніть відео;
// Якщо сторінка відображається, відтворіть відеозображення;

function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
} else {
      // Зміна видимості сторінки
  document.addEventListener(visibilityChange, handleVisibilityChange, false);

     // Коли відео призупиняється, встановлюємо назву.
     // Це свідчитеме про паузу.
  videoElement.addEventListener("pause", function(){
      document.title = 'Paused';
  }, false);

  // Коли відео відтворюється, встановлюємо назву.
  videoElement.addEventListener("play", function(){
      document.title = 'Playing';
  }, false);

}

Властивості, використані в інтерфейсі документа

API Видимість сторінки додає наступні властивості до інтерфейсу Document :

Document.hidden (en-US) Read only
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
Document.visibilityState (en-US) Read only
 DOMString вказує на поточний стан видимості документа. Можливі значення:
visible
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
hidden
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
prerender
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
Примітка: Не всі браузери підтримують попереднє завантаження.
unloaded
Сторінка перебуває в процесі вивантаження з пам'яті.
Примітка: Не всі браузери підтримують це значення.
Document.onvisibilitychange (en-US)
 EventListener (en-US) задає код, який буде викликатися при виникненні події visibilitychange (en-US) .
//startSimulation та pauseSimulation визначені в іншому місці
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

Специфікації

Specification Status Comment
Page Visibility (Second Edition) Recommendation Початкове значення.

Працює з браузерами

BCD tables only load in the browser

Дивись також