這是我第10篇簡(jiǎn)書。

Document.visibilityState：

• visible : 當(dāng)前頁面可見. 即此頁面在前景標(biāo)簽頁中，并且窗口沒有最小化.
• hidden: 頁面對(duì)用戶不可見. 即文檔處于背景標(biāo)簽頁或者窗口處于最小化狀態(tài)，或者操作系統(tǒng)正處于 '鎖屏狀態(tài)' .
• prerender : 頁面此時(shí)正在渲染中, 因此是不可見的. 文檔只能從此狀態(tài)開始，永遠(yuǎn)不能從其他值變?yōu)榇藸顟B(tài).注意: 瀏覽器支持是可選的.
• unloaded : 頁面從內(nèi)存中卸載清除. 注意: 瀏覽器支持是可選的.

前兩個(gè)用的最多， 用visibilitychange事件進(jìn)行監(jiān)聽。

document.addEventListener("visibilitychange", function() {
  if(document.visibilityState === "visible"){
    console.log("hello，dxl")
  }
  if(document.visibilityState === "hidden"){
    console.log("離開當(dāng)前頁")
  }
});

應(yīng)用場(chǎng)景：
監(jiān)控用戶行為，用戶進(jìn)行頁面間的切換時(shí)，用visibilityState 的狀態(tài)來進(jìn)行對(duì)應(yīng)的操作。

例如：

• 當(dāng)前頁不可見，用戶的視角不在當(dāng)前頁面時(shí)，暫停加載廣告，幻燈片、停止加載視頻、開始加載小動(dòng)畫等。減少對(duì)用戶寬帶的占用，減少服務(wù)器壓力，節(jié)省用戶內(nèi)存，以及到達(dá)更好的播放效果。
• 或者，當(dāng)頁面切換時(shí)動(dòng)態(tài)改變document.title頁面的標(biāo)題，例如視角不在那個(gè)頁面時(shí)來了提示信息，當(dāng)切換到那個(gè)頁面時(shí)，那個(gè)頁面的title消息提示消失恢復(fù)原樣，這些應(yīng)用場(chǎng)景就需要visibilityState 了。