通过Page Visibility API检测页面可见状态，监听页面切换并暂停动画、轮询等后台任务，可有效降低CPU占用与能耗，提升性能和续航，尤其适用于移动端。
当用户切换标签页时，页面可能仍在后台运行动画、轮询接口或执行定时任务，这会浪费 CPU 资源和电池电量。通过 Page Visibility API，我们可以检测页面是否处于可见状态，从而暂停不必要的操作，显著提升性能与能效。
监听页面可见性变化
Page Visibility API 提供了 document.visibilityState 属性和 visibilitychange 事件，用于判断当前页面的显示状态：
- visible：页面在前台且可见
- hidden：页面被隐藏（如切换标签、最小化窗口）
- prerender：页面正在预渲染（较少见）
监听 visibilitychange 事件可及时响应状态切换：
document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'hidden') {
// 页面隐藏，暂停耗资源操作
} else {
// 页面恢复可见，恢复操作
}
});
暂停定时任务与动画
在不可见状态下继续执行 setInterval 或 requestAnimationFrame 是一种资源浪费。可在隐藏时清除或暂停这些任务：
- 暂停轮询请求（如每隔几秒调用 API）
- 停止 Canvas 动画或视频自动播放
- 延后非关键的数据同步或日志上报
示例：控制动画循环
let animId;
const animate = () => {
// 渲染帧逻辑
animId = requestAnimationFrame(animate);
};
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
cancelAnimationFrame(animId);
} else {
requestAnimationFrame(animate);
}
});
优化网络请求策略
页面隐藏时，用户无法感知数据更新。此时可暂停轮询，或合并多个待发送请求以减少连接开销：
- 暂停健康检查或实时消息拉取
- 缓存离线行为，在恢复可见后再提交
- 避免在 hidden 状态下预加载非必要资源
例如，将打点日志暂存，页面恢复后再批量上报，既节省电量也降低服务器压力。
基本上就这些。合理使用 Page Visibility API 能有效降低后台运行功耗，同时延长设备续航，对移动端尤其重要。实现简单，收益明显，值得在每个需要持续运行的 Web 应用中启用。
