這里必須解釋一下，這個“激活”，指的是這個標簽是否正被用戶瀏覽，或者說是否為當前標簽。

那么，這個 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文件，打開后切換標簽即可測試效果）。

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表