唯一可靠方式是监听 visibilitychange 事件并配合 document.visibilitystate 判断；单次读取或用 document.hidden 决策极易出错，因初始状态不可靠、ios/安卓兼容性差且需容错处理。
直接监听 visibilitychange 事件，配合 document.visibilityState 判断，是唯一可靠方式；单次读取状态或用 document.hidden 做业务决策，90% 会出错。
为什么不能只读一次 document.visibilityState
页面加载完成时，document.visibilityState 可能已是 'hidden'（如 Chrome 预加载标签页、Firefox 休眠恢复），也可能卡在 'visible'（如 iOS Safari 切后台不触发事件）。单次判断无法反映真实用户行为变化。
常见误用场景包括：
- 在
DOMContentLoaded回调里检查状态，就认为“用户是否在看”，结果漏掉后续切换 - 把
document.hidden当作开关控制定时器启停，但该属性已被标记为“向后兼容”，现代浏览器推荐用visibilityState - 没处理 SSR 渲染时
document不存在导致的undefined报错
怎么正确监听 visibilitychange 事件
这个事件只在 document 上触发，不冒泡，也不支持委托。绑定错对象或时机不对，等于没绑。
实操要点：
- 监听必须写成
document.addEventListener('visibilitychange', handler)，不是window或某个 DOM 节点 - 脚本需在 DOM 加载完成后执行，推荐放在
DOMContentLoaded后，或使用defer属性加载 script - 避免在 iframe 子页面中监听父页面状态——子页面的
document和父页面无关 - 加一层容错：注册监听后，立即检查一次当前状态，防止初始状态变化被漏掉
示例：
document.addEventListener('DOMContentLoaded', () => {
const handleVisibilityChange = () => {
if (document.visibilityState === 'visible') {
console.log('页面回到前台');
// 恢复定时器、动画等
} else if (document.visibilityState === 'hidden') {
console.log('页面退到后台');
// 暂停视频、停掉轮询
}
};
<p>// 先检查当前状态，再监听变化
handleVisibilityChange();
document.addEventListener('visibilitychange', handleVisibilityChange);
});</p>
iOS Safari 和安卓 WebView 的兼容性坑
iOS Safari 对 visibilitychange 触发极其保守：App 切后台、锁屏、甚至双击 Home 键唤出多任务界面，都可能不发事件。这不是 bug，是系统限制。
安卓 WebView 或某些 Electron 环境下，visibilityState 可能长期卡在 'visible'，需交叉验证：
- 搭配
document.hasFocus()辅助判断（注意：该方法在页面被遮盖但未切标签时仍返回true） - 对关键逻辑（如答题倒计时、直播心跳），必须服务端同步校验，客户端仅做本地偏差补偿
- 若用 Service Worker，它可能拦截生命周期事件，导致
visibilitychange延迟或丢失，建议加setTimeout(() => checkState(), 100)补位
上报用户实际停留时长的正确姿势
只在 document.visibilityState === 'visible' 时累计时长，且必须区分“首次可见”和“再次切回”：
- 页面加载完不立即开始计时，等首次触发
visibilitychange且状态为'visible'才设activeStart = Date.now() - 状态变
'hidden'时，计算并累加Date.now() - activeStart - 再次变
'visible'，重置activeStart，继续累计 - 卸载前用
beforeunload补报剩余时长（但要注意：安卓后台杀进程时该事件可能不触发，visibilitychange更可靠）
真正容易被忽略的是：Chrome 冻结闲置标签页、Firefox 标签休眠都会让 visibilityState 变 'hidden'，但用户物理上并未离开——这意味着你上报的“离开”不等于“用户走了”，而是“浏览器决定不给你资源了”。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
