怎样用 visibilitychange 在页面切换到后台时节省资源开销

监听页面可见性变化可显著降低资源消耗：通过visibilitychange事件暂停视频、动画及非关键请求，恢复时再启用，能节省20%–40%的CPU、内存、电量和带宽。

页面切到后台（比如切换标签页、最小化窗口、锁屏）时，用户根本看不到内容，但很多逻辑还在照常运行——视频继续播、动画持续渲染、定时器不停跑、接口反复轮询。这些“无效劳动”白白消耗 CPU、内存、电量和带宽。用 visibilitychange 事件，几行代码就能让页面自动“暂停干活”，等用户回来再“恢复工作”，资源开销通常能下降 20%–40%。

监听 visibilitychange 事件是唯一可靠时机

不能只靠 document.hidden 做一次判断，它只是当前快照；真正要响应状态变化，必须监听 visibilitychange 事件。这个事件在浏览器明确切换可见性时触发（比如从 visible → hidden），是执行暂停或恢复动作的准确信号。

• 绑定一次即可，建议在页面初始化时注册：document.addEventListener('visibilitychange', handleVisibility)
• 在回调函数中用 document.visibilityState 判断当前状态：'visible'、'hidden'（主流浏览器均支持，旧版 Safari 的 'prerender' 已基本可忽略）
• 避免在事件回调里做耗时操作，保持轻量，防止阻塞主线程

暂停视频和音频播放，避免声音冲突与流量浪费

用户切走后还继续播放音视频，不仅浪费带宽和解码资源，还可能在切回时突然出声，体验差。应主动控制媒体元素行为。

• 隐藏时调用 video.pause() 或 audio.pause()，并记录当前播放位置（如 video.currentTime）
• 恢复时先检查是否已暂停：if (video.paused) video.play()，避免重复调用 play() 导致报错或无声
• 对自动播放受限的环境（如移动端），恢复播放前可加一次用户手势检测兜底

停掉 requestAnimationFrame 和 Canvas 动画循环

requestAnimationFrame 在页面不可见时会被浏览器自动节流甚至暂停，但不能依赖它“自动省电”——有些浏览器仍会调度帧，尤其在多标签长期驻留时。显式取消更稳妥。

• 保存 requestAnimationFrame 返回的 ID，在 hidden 状态下调用 cancelAnimationFrame(id)
• 恢复 visible 后重新启动动画循环，而不是沿用旧 ID
• Canvas 渲染、粒子动画、图表实时更新等场景都适用这套逻辑

延迟发送用户行为日志和非关键请求

用户看不见页面时，上报点击、滚动、停留时长等打点数据没有意义，还产生大量小包请求，加重网络和服务器负担。

• 将待上报行为暂存在数组或 Map 中，不立即发请求
• hidden 状态下暂停所有非紧急的 fetch 或 XMLHttpRequest
• visible 时批量合并发送，或按策略分批发出，减少请求数量和频率