什么是Page Visibility API_它如何优化资源使用

Page Visibility API通过document.visibilityState和visibilitychange事件实现页面可见性检测，支持在hidden时暂停视频、定时器、动画等无效操作，visible时恢复，显著降低资源消耗。

Page Visibility API 是浏览器原生提供的一个轻量级接口，用于检测当前网页标签页是否对用户可见。它不依赖第三方库，开销极低，核心价值在于让页面“知进退”——该干活时干活，该休息时休息。

它怎么帮页面省资源？

当用户切走标签页、最小化窗口，甚至锁屏时，页面其实还在后台运行。动画照播、定时器照跑、接口照轮询，这些操作既浪费 CPU 和内存，又耗电、占带宽、加重服务器压力。Page Visibility API 就是来叫停这些“无效劳动”的。

关键状态与响应逻辑

• document.visibilityState 返回当前状态：
  • "visible"：页面在前台且完全可见
  • "hidden"：页面被隐藏（如切换标签、最小化、锁屏）
  • "prerender"：页面预渲染中（较少见，可忽略）
• visibilitychange 事件会在状态切换瞬间触发，是执行暂停/恢复动作的唯一可靠时机。

典型资源优化场景

• 视频或音频自动暂停与恢复
  页面隐藏时调用 video.pause()，可见时检查 video.paused 后调用 play()，避免声音冲突和流量浪费。

• 清除或冻结定时任务

  let pollTimer;
  function startPolling() {
    pollTimer = setInterval(fetchLatestData, 3000);
  }
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
      clearInterval(pollTimer);
    } else {
      startPolling();
    }
  });

• 暂停 requestAnimationFrame 动画循环
  避免后台持续渲染 Canvas 或 CSS 动画，直接调用 cancelAnimationFrame(id) 即可。

• 延迟非关键请求与日志上报
  把用户行为打点暂存在数组里，等页面重新 visible 时批量发送，减少小包请求和电量消耗。

• 暂停轮播图、粒子特效、实时图表重绘等视觉密集型操作
  这些在用户看不见时毫无意义，停掉后内存占用常下降 20%–40%。

不复杂但容易忽略
它不需要复杂配置，几行监听代码就能生效；但它常被遗忘——尤其在移动端，省电和续航提升非常直观。只要页面有持续运行的逻辑，就值得加一层 visibility 判断。