HTML中如何用Page Visibility API节省资源

本文深入解析了如何利用HTML的Page Visibility API精准节省页面资源——它并非自动生效的“银弹”，而是需要开发者主动监听visibilitychange事件、兼容旧浏览器前缀，并在页面隐藏时手动清理setInterval、requestAnimationFrame、视频播放、WebGL渲染等高频耗能操作，恢复时谨慎重启以避免重复执行；同时提醒你避开事件延迟、误判状态、WebView兼容性等常见陷阱，尤其强调轮播图、粒子动画、实时图表等视觉密集型逻辑最易被忽视却最伤性能，只要页面存在持续运行的JS，就值得加一层visibilityState判断来显著降低CPU、GPU和内存开销。

能省，但只在你主动响应 visibilitychange 事件时才生效；浏览器不会自动停掉 setInterval、requestAnimationFrame 或网络请求——这些都得你自己清。

监听 visibilitychange 事件要兼容旧版浏览器

早期 Chrome、IE 和 Firefox 使用带前缀的事件名，比如 webkitvisibilitychange、msvisibilitychange。现代浏览器已统一支持标准事件名 visibilitychange，但如果你还要支持 IE10 或 Android 4.4 WebView，就得做兼容处理：

• 先检查 document.hidden 是否存在，不存在就直接跳过
• 用 ['', 'webkit', 'ms', 'moz'].find(prefix => (prefix + 'Hidden') in document) 找出当前前缀
• 注册事件时用 document.addEventListener(prefix + 'visibilitychange', handler)
• 注意：Safari 13.1+ 和所有现代 Chrome/Firefox/Edge 已完全支持无前缀版本，可直接用 visibilitychange

document.visibilityState === 'hidden' 时该停哪些东西

不是所有后台行为都值得停，重点盯住「用户看不见却还在高频执行」的逻辑：

• setInterval / setTimeout 轮询（如每 3s fetch 新消息）→ 必须 clearInterval，否则 CPU 持续占用
• requestAnimationFrame 动画循环 → 必须配对调用 cancelAnimationFrame，否则 Canvas 或 CSS 动画照常渲染
• 视频/音频播放 → 调用 video.pause()，但别直接 video.currentTime = 0，避免丢失进度
• WebGL 渲染帧 → 停掉 render() 调用，GPU 占用会立刻下降
• 非关键日志或埋点上报 → 攒在数组里，等回到 visible 状态再批量发，减少小包请求

容易忽略的边界情况和坑

看似简单，实际线上容易翻车：

• visibilitychange 不保证实时：快速切两次标签，事件可能被合并或延迟几毫秒，不能依赖它做精确计时
• document.hidden 是只读的，设成 true 没效果，也别试图用它“模拟隐藏”来测试逻辑
• hidden 状态 ≠ 页面卸载：pagehide 或 beforeunload 才更接近“即将离开”，visibilitychange 只管“是否可见”
• WebView 场景（如微信内嵌页、Android App 内置 WebView）需确认是否启用 visibility 支持，部分老版本始终返回 visible
• 暂停后恢复时，别盲目重开定时器——先检查是否已被手动清除，避免重复启动

最常被漏掉的是轮播图、粒子动画、实时图表重绘这类视觉密集型操作。它们在后台跑着不卡界面，但内存和 GPU 消耗真实存在，一不留神就多占 30% 内存。只要页面有持续运行的 JS 逻辑，就值得加一层 visibilityState 判断。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML中如何用Page Visibility API节省资源》文章吧，也可关注golang学习网公众号了解相关技术文章。