如何利用Page Visibility API优化标签页隐藏状态下的应用性能与功耗？

在现代 Web 应用中。使用者经常会在多个标签页之间切换、最小化窗口或锁屏。此时比如页面仍然在后台跑着动画，还有轮询请求，再有计时器等。导致 CPU 占用飙高，另外能耗大幅上升，甚至影响前台页面的渲染速度。

再看使用者痛点一。CPU 与内存使用过高

隐藏的标签页依旧执行 setInterval、requestAnimationFrame 或 Web Worker 定时器，导致浏览器资源被无效占用。对低配设备尤其痛苦，

再看使用者痛点二，电池续航差

持续的网络请求与动画会让手机电量迅速下降。是在后台播放视频或实时通信时更是“把灯关不掉”。

使用者痛点三的观点是。网络流量与费用浪费

后台持续拉取数据或上传日志，若使用者已离开页面这些请求完全没有价值，却仍然消耗流量。

使用者痛点四这方面。前台体验受损

后台任务抢占主线程资源，导致前台页面渲染卡顿、响应延迟。

Page Visibility API 简介

document.visibilityState 通过返回 'visible' | 'hidden' | 'prerender' | 'unloaded' 四种状态，让开发者知道当前页面是否可见；'visibilitychange' 事件则在状态切换时触发。