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 时批量发送，减少小包请求和电量消耗。
不复杂但容易忽略
它不需要复杂配置，几行监听代码就能生效；但它常被遗忘——尤其在移动端，省电和续航提升非常直观。只要页面有持续运行的逻辑，就值得加一层 visibility 判断。
