JavaScript页面可见性API用于检测页面是否对用户可见，通过document.visibilityState、document.hidden和visibilitychange事件实现，可优化资源消耗、暂停视频、停止轮询等，现代浏览器广泛支持。
JavaScript 页面可见性 API 是浏览器提供的一套接口，用来判断当前页面是否对用户可见（比如在前台标签页中显示），还是被隐藏（比如切换到其他标签页、最小化窗口、锁屏等）。它不依赖定时器或焦点事件，而是直接反映页面的真实可见状态，特别适合优化资源消耗，比如暂停视频、停止轮询、节省电量。
核心属性和事件
可见性 API 主要通过 document.visibilityState 和 document.hidden 两个属性，配合 visibilitychange 事件使用：
document.visibilityState：返回字符串，常见值有 “visible”（页面可见）、”hidden”（页面不可见）、”prerender”（预渲染，较少见） document.hidden：布尔值，true 表示页面隐藏，false 表示可见（兼容旧版，但推荐优先用 visibilityState） visibilitychange 事件：当页面可见性发生变化时触发，比如用户切走又切回标签页
基础检测写法
监听 visibilitychange 事件是最常用方式，可以实时响应状态变化：
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { console.log('页面变为可见，可恢复动画/轮询/音频'); } else { console.log('页面被隐藏，建议暂停非必要操作'); }});
注意：该事件不会在页面首次加载时触发，只在后续状态变化时发生。如需初始化逻辑，应单独检查一次 document.visibilityState。
立即学习“Java免费学习笔记（深入）”；
典型应用场景
合理利用可见性状态，能显著提升性能与用户体验：
视频/音频播放：页面隐藏时自动 pause()，恢复时 play()（需用户交互授权的自动播放除外） 定时任务管理：隐藏时 clearInterval() 或暂停 WebSocket 心跳，避免无效请求 数据同步节流：比如表单草稿保存，可延迟到页面可见时再提交 分析埋点：区分“真实浏览时长”，过滤掉后台标签页停留时间
兼容性与注意事项
现代浏览器（Chrome 33+、Firefox 18+、Safari 7+、Edge 12+）均支持标准 API。部分老版本需加前缀，如 webkitVisibilityState，但目前已基本无需处理。
注意两点：
iFrame 中的页面也拥有独立的可见性状态，父页面不可直接读取子 iframe 的 visibilityState 手机端锁屏、App 切换到后台、微信内置浏览器切出等场景，多数也触发该事件，但部分 WebView 可能支持不完整
基本上就这些。用好可见性 API，能让网页更聪明地“呼吸”。
以上就是javascript页面可见性API是什么_如何检测页面是否被隐藏？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542601.html
微信扫一扫 
支付宝扫一扫 
