如果 頁面最小化了 或者 隱藏在了其他標簽頁后面，那么有些功能是可以停下來的，比如輪詢服務器或者某些動畫效果H5 引入的 Page Visibility API，能很有效地幫助我們完成。

這個 API 本身非常簡單，由以下三部分組成：

一、document.hidden：
表示頁面是否隱藏的布爾值。頁面隱藏包括 頁面在后臺標簽頁中 或者 瀏覽器最小化（注意，頁面被其他軟件遮蓋并不算隱藏，比如打開的 sublime 遮住了瀏覽器）
二、document.visibilityState：
表示下面 4 個可能狀態的值：
1）hidden：頁面在后臺標簽頁中或者瀏覽器最小化
2）visible：頁面在前臺標簽頁中
3）prerender：頁面在屏幕外執行預渲染處理 document.hidden 的值為 true
4）unloaded：頁面正在從內存中卸載
三、Visibilitychange 事件：
當文檔從可見變為不可見或者從不可見變為可見時，會觸發該事件。

我們可以監聽 Visibilitychange 事件，當該事件觸發時，獲取 document.hidden 或者document.visibilityState的值，根據該值進行頁面一些事件的處理。
1）

document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
// 動畫停止
// 服務器輪詢停止 等等
  } else {
// 動畫開始
// 服務器輪詢
  }
});

2）

document.addEventListener("visibilitychange", function () {
var visibilityState = document.visibilityState;
    if (visibilityState == "visible") {
        console.log("歡迎回來！");
        console.log(document.visibilityState)
//do something
//繼續視頻播放
    }
    if (visibilityState == "hidden") {
        console.log("不要走！");
        console.log(document.visibilityState);
//do something else
//暫停視頻播放
    }
})

提供一個兼容各高級瀏覽器以及低版本 IE 寫法（低版本 IE 用 onfocus/onblur 兼容）：

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
 document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
window.onpageshow = window.onpagehide
= window.onfocus = window.onblur = onchange;

  function onchange (evt) {
var v = "visible", h = "hidden",
    evtMap = {
      focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
    };

evt = evt || window.event; 
if (evt.type in evtMap)
  document.body.className = evtMap[evt.type];
else
  document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
onchange({type: document[hidden] ? "blur" : "focus"});
})();