无需登录 数据私有 本地保存

页面可见性检测演示 - Visibility API

16
0
0
0

页面可见性检测演示

Page Visibility API · 实时监测 · 计时器对比

可见
visibilityState: visible document.hidden: false hasFocus(): true

最后变化：--

|
0
可见次数
0
隐藏次数
0s
总隐藏时长
0s
当前状态持续
--
平均隐藏时长

实际时间计时器（准确）

00:00.0
基于 performance.now()，始终精确

Interval 计时器（可能偏差）

00:00.0
基于 setInterval，隐藏时降频
计时器差异：0.0s
两个计时器同步中...

状态变化历史

# 时间 事件 来源 隐藏时长 备注
等待状态变化...
常见问题与知识点
Page Visibility API 是一个浏览器API，用于检测网页当前是否对用户可见。它通过 document.visibilityState 属性和 visibilitychange 事件，让开发者能够知道用户是否正在查看当前标签页。当用户切换标签页、最小化窗口或锁屏时，页面变为"hidden"状态。
主要有两个值：'visible'（页面至少部分可见）和 'hidden'（页面完全不可见）。部分浏览器还支持 'prerender'（预渲染中），但该值已被废弃。实际开发中主要处理 visible 和 hidden 两种状态。
常见场景包括：①暂停/恢复视频播放（用户切换标签页时自动暂停视频）；②停止不必要的网络轮询（减少服务器压力）；③暂停动画和游戏循环（节省CPU和电量）；④改变页面标题吸引用户注意；⑤统计用户实际查看页面的时长（更准确的埋点数据）；⑥控制WebSocket连接状态。
visibilitychange 检测标签页是否可见（切换标签页、最小化窗口时触发）。focus/blur 检测窗口是否获得焦点（切换到其他应用时触发，但标签页可能仍然可见）。两者结合使用可以实现更精细的状态监测：页面可见但无焦点（用户在别的应用但标签页可见）、页面不可见（标签页切换或最小化）。
浏览器在页面隐藏时会限制：①setTimeout/setInterval 降频至约1000ms（从常见的最小延迟如4ms或100ms）；②requestAnimationFrame 完全暂停；③部分浏览器限制后台标签页的CPU和网络资源；④Web Audio API 可能被限制。这就是为什么基于时间戳的计时器更可靠——如上方的对比演示所示。
移动端浏览器同样支持 Page Visibility API。在移动端，切换App、锁屏、按Home键都会触发 visibilitychange。需要注意的是，移动端浏览器可能更激进地限制后台标签页的资源使用。此外，移动端的"后台标签页"概念与桌面端略有不同，建议在真机上充分测试。
🔧 相关工具