---
title: API відображення сторінки
slug: Web/API/API_відображення_сторінки
tags:
  - API
  - API відображення сторінки
  - visibilityState
  - visibilitychange
  - відображення сторінки
  - процеси скритої закладки
  - фоновий режим
translation_of: Web/API/Page_Visibility_API
---
<div>{{DefaultAPISidebar("Page Visibility API")}}</div>

<div></div>

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

<div class="note">
<p><strong>Примітка:</strong> API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.</p>
</div>

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

<p>Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <code>&lt;iframe&gt;</code> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.</p>

<h3 id="Випадки_використання">Випадки використання</h3>

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

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

<p>Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.</p>

<div class="note">
<p><strong>Примітка:</strong> У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.</p>
</div>

<h3 id="Політика_позиціонування_як_сприяння_продуктивності_фонової_сторінки">Політика позиціонування, як сприяння продуктивності фонової сторінки</h3>

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

<ul>
 <li>Більшість браузерів припиняють посилати {{domxref ("Window.requestAnimationFrame", "requestAnimationFrame ()")}} зворотні виклики на фонові або прихован вкладкиі {{{HTMLElement ("iframe")}}} для підвищення продуктивності і терміну служби акумулятора.</li>
 <li>Такі таймери, як {{domxref ("WindowOrWorkerGlobalScope.setTimeout", "setTimeout ()")}}, гасяться в фонових і неактивних вкладках, щоб допомогти поліпшити продуктивність. Більш детальну інформацію див. у розділі  <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок, що перевищують встановлені.</a></li>
 <li>Використання фонового тайм-ауту на основі виділеного ліміту тепер доступно в сучасних браузерах (Firefox 58+, Chrome 57+), що накладає додаткові обмеження на використання процесора фонового таймера. В сучасних браузерах це працює схожим чином, докладніше про це можна прочитати нижче:
  <ul>
   <li>У Firefox, вікна в фонових вкладках мають свій власний бюджет часу у мілісекундах - максимальне і мінімальне значення +50 мс і -150 мс відповідно. Chrome дуже схожий, за виключенням того, що бюджет зазначається в секундах.</li>
   <li>Вкладки підлягають гасінню через 30 секунд, з тими ж самими правилами затримки по гасінню, що і для віконних таймерів (знову ж таки, дивіться розділ <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified">Причини затримок довше, ніж зазначено</a>).  У Chrome це значення дорівнює 10 секундам.</li>
   <li>Завдання по таймеру дозволені тільки в тому випадку, якщо витрати по ньому не мають негативного значення.</li>
   <li>Після закінчення виконання коду таймера, тривалість часу, зайнятого на його виконання, віднімається від часу тайм-ауту його вікна.</li>
   <li>Бюджет регенерується зі швидкістю 10 мс на секунду, як в Firefox, так і у Chrome.</li>
  </ul>
 </li>
</ul>

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

<ul>
 <li>Вкладки, які відтворюють звук, перебувають на передньому плані і не гасяться.</li>
 <li>Вкладки з кодом, що використовують мережеві з'єднання у реальному часі  (<a href="/en-US/docs/Web/API/WebSockets_API">WebSockets</a> та <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a>) , залишаються незачепленими, щоб уникнути тимчасового закриття цих з'єднань і їх несподіваного відключення.</li>
 <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> процеси також залишаються непорушними для уникнення тайм-аутів.</li>
</ul>

<h2 id="Приклад">Приклад</h2>

<p>Подивіться <a href="http://daniemon.com/tech/webapps/page-visibility/">живий приклад</a> (відео зі звуком).</p>

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

<pre class="brush: js">   // Встановіть ім'я властивості 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);

}
</pre>

<h2 id="Властивості_використані_в_інтерфейсі_документа">Властивості, використані в інтерфейсі документа</h2>

<p>API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :</p>

<dl>
 <dt>{{domxref("Document.hidden")}} {{ReadOnlyInline}}</dt>
 <dd>Повертає <code>true</code> , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і <code>false</code> якщо навпаки.</dd>
 <dt>{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}</dt>
 <dd> {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення:
 <dl>
  <dt><code>visible</code></dt>
  <dd>Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.</dd>
  <dt><code>hidden</code></dt>
  <dd>Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.</dd>
  <dt><code>prerender</code></dt>
  <dd>Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження.
  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують попереднє завантаження.</div>
  </dd>
  <dt><code>unloaded</code></dt>
  <dd>Сторінка перебуває в процесі вивантаження з пам'яті.
  <div class="note"><strong>Примітка:</strong> Не всі браузери підтримують це значення.</div>
  </dd>
 </dl>
 </dd>
 <dt>{{domxref("Document.onvisibilitychange")}}</dt>
 <dd> {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .</dd>
</dl>

<pre class="brush: js">//startSimulation та pauseSimulation визначені в іншому місці
function handleVisibilityChange() {
  if (document.hidden) {
    pauseSimulation();
  } else  {
    startSimulation();
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);
</pre>

<h2 id="Специфікації">Специфікації</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Page Visibility API')}}</td>
   <td>{{Spec2('Page Visibility API')}}</td>
   <td>Початкове значення.</td>
  </tr>
 </tbody>
</table>

<h2 id="Працює_з_браузерами">Працює з браузерами</h2>

<div>
<h3 id="Document.visibilityState"><code>Document.visibilityState</code></h3>

<div>


<p>{{Compat("api.Document.visibilityState")}}</p>
</div>
</div>

<h2 id="Дивись_також">Дивись також</h2>

<ul>
 <li>Опис <a href="http://blogs.msdn.com/b/ie/archive/2011/07/08/using-pc-hardware-more-efficiently-in-html5-new-web-performance-apis-part-2.aspx" title="Page Visibility on IEBlog"> API Видимості сторінки</a> від IEBlog.</li>
 <li>Опис <a href="http://code.google.com/chrome/whitepapers/pagevisibility.html" title="Page Visibility API by Google">API Видимості сторінки</a>  від Google</li>
</ul>