點評：HTMl5 推出了一個很“特別”的API Page Visibility ，之所以說它特別，是因為這個API 關注的是一個很少人留意的功能—— 瀏覽器標籤( tab ) 是否被激活
這裡必須解釋一下，這個“激活”，指的是這個標籤是否正被用戶瀏覽，或者說是否為當前標籤。
那麼，這個API 究竟有些什麼用途呢？通常，很多傳統的頁面在用戶沒有激活它的時候，它還會繼續工作，例如，當用戶正在瀏覽新聞門戶，而他之前打開的NBA 球賽頁面會繼續刷新獲取最新結果，視頻網站會繼續佔用帶寬加載資源，於是，如果這類不必要的工作太多了，就會造成很多的資源浪費。因此，這貨相當有用：
1.Web 程序每隔一段時間會自動更新頁面信息，確保用戶獲取到及時的信息，但是，當用戶正在瀏覽其他頁面時，可以控制它暫停更新。
2.視頻網站在播放在線視頻時會不斷加載視頻，直到視頻加載完畢，但是，當用戶正在瀏覽其他頁面時，可以暫停加載視頻資源，節省帶寬。
3.網站首頁上有個大幻燈自動播放，當用戶瀏覽其他頁面了，就可以暫停播放。
於是，通過Page Visibility ，我們可以至少達到以下一種或幾種的好處：
1.節省服務器資源，Ajax 輪詢這類服務器資源佔用常常會被忽略，關閉這種請求可以節省資源。
2.節省內存消耗。
3.節省帶寬消耗。
因此，使用Page Visibility 無論是對於用戶還是服務器都有好處。
接下來正式介紹一下這個API 。 Page Visibility 會在瀏覽器的document 對像上添加兩個屬性hidden 和visibilityState 。如果當前的標籤被激活了，那麼document.hidden 的值為false ，否則為true 。 visibilityState 則有4個可能值：
1.hidden：當瀏覽器最小化、切換標籤、電腦鎖屏時visibilityState 值是hidden
2.visible：當瀏覽器最頂級上下文（context）的document 至少顯示在一個屏幕當中時，返回visible；當瀏覽器窗口沒有最小化，但是瀏覽器被其他應用遮擋時，這時也為visible
3.prerender：當文檔被加載到屏幕畫面以外或者不可見時返回prerender，這個是非必要屬性，瀏覽器可選擇性的支持。
4.unloaded：當文檔將要被離開( unload ） 時返回unloaded，瀏覽器也可選擇性的支持這個屬性
另外，document 上會添加visibilitychange 事件，當document 的可見性改變時觸發該事件。
好了，介紹完屬性，放上一個使用實例（複製代碼保存到一個HTML文件，打開後切換標籤即可測試效果）。
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>測試HTML5 Page Visibility API</title>
</head>
<body></p><p> <div></div>
<script>
function browerKernel(){
var result;
['webkit', 'moz', 'o', 'ms'].forEach(function(prefix){</p><p> if( typeof document[ prefix + 'Hidden' ] != 'undefined' ){
result = prefix;
}
});
return result;
}
function init(){
prefix = browerKernel();
var showTip = document.getElementById('showTip');
document.addEventListener( prefix + 'visibilitychange', function onVisibilityChange(e){
var tip = null;
if( document[ prefix + 'VisibilityState' ] == 'hidden' ) tip = '<p>離開頁面</p>';
else if( document[ prefix + 'VisibilityState' ] == 'visible' ) tip = '<p>進入頁面</p>';
showTip.innerHTML = showTip.innerHTML + tip;
});
}
window.onload = init();
</script>
</body>
</html>
這個實例的作用是監聽標籤的可見性是否改變，並且在標籤可見性發生改變時產生提示。
值得注意的是，在目前，瀏覽器對於Page Visibility 的支持還是通過私有屬性支持，因此在檢測或利用Page Visibility 提供的屬性時需要加上瀏覽器私有前綴，例如在Chrome 中檢測上面的visibilityState 屬性時，就需要檢測document.webkitVisibilityState 而不是document.visibilityState 。所以，Demo 中會首先檢測瀏覽器類型，然後才使用Page Visibility 的API 。