监听页面可见性变化可显著降低资源消耗：通过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 时批量合并发送，或按策略分批发出，减少请求数量和频率
