如何判断网页可见性？需监听哪些事件识别网页活跃状态？

嘿，这个问题问到点子上了——毕竟没人想让自己的网页在后台偷偷消耗用户的CPU和带宽，既影响性能又不友好。我来给你梳理清楚：

一、判断网页当前可见性的方法 #

核心就是用浏览器提供的Document.visibilityState API，它能精准返回网页的可见状态，有三个可能的值：

• visible：网页处于可见状态——当前标签页是活跃的，且浏览器窗口没有被完全遮挡（比如没被其他窗口盖住、没最小化）
• hidden：网页不可见——不管是切换到了其他标签页、浏览器窗口被遮挡/最小化，还是设备锁屏，都会返回这个值
• prerender：网页正在后台预渲染（比如Chrome的预加载功能），这时候页面还没被用户实际看到

另外还有个旧属性document.hidden，它只返回布尔值（true表示不可见，false表示可见），虽然现在主流浏览器还兼容，但visibilityState能提供更细致的状态信息，所以更推荐用它。

举个快速判断的代码示例：

function checkPageVisibility() {
  if (document.visibilityState === 'visible') {
    console.log('网页现在是可见的，可以正常运行资源密集型操作');
  } else {
    console.log('网页不可见，该停的操作赶紧停！');
  }
}

二、监听状态变化的关键事件 #

要实时捕捉网页可见性/活跃状态的变化，最可靠的事件是visibilitychange，直接绑定在document对象上即可。

比如你可以写这样的监听逻辑，用来暂停或恢复消耗资源的操作（比如视频播放、定时数据轮询）：

document.addEventListener('visibilitychange', () => {
  switch(document.visibilityState) {
    case 'visible':
      // 网页回到视野，恢复操作
      resumeVideoPlayback();
      restartDataPolling();
      break;
    case 'hidden':
      // 网页被隐藏，暂停资源消耗
      pauseVideoPlayback();
      stopDataPolling();
      break;
    case 'prerender':
      // 预渲染状态，一般不需要做什么特殊处理
      break;
  }
});

额外提醒：别混淆focus/blur和visibilitychange #

很多开发者会想到用window.focus和window.blur事件，但这俩只能判断标签页是否处于活跃状态（比如用户切到其他标签页触发blur，切回来触发focus）。但如果用户打开了你的标签页，但同时用其他窗口盖住了浏览器，这时候标签页还是活跃的（focus状态），但网页其实是不可见的——这时候visibilityState会变成hidden，但focus/blur事件不会触发。

所以如果你的需求是准确判断网页是否真的被用户看到，visibilitychange才是正确的选择；如果只是关心标签页是否被用户选中，focus/blur才适用。

内容的提问来源于stack exchange，提问作者AxD