如何实现HTML5页面浏览时长统计及用户实际浏览时长记录方法详解？

本文共计868个文字，预计阅读时间需要4分钟。

页面可见性+API的核心是 `document.visibilityState + visibilitychange 事件，它不依赖于定时器或模拟，是浏览器原生支持的可靠方案。

常见错误是只监听 focus/blur，但用户切到其他标签页、最小化窗口、锁屏时这些事件根本不会触发；还有人用 setInterval 轮询 document.hidden，既浪费资源又不准。

• 必须在 document.addEventListener('visibilitychange', handler) 中读取 document.visibilityState，而不是缓存初始值
• visibilityState 可能为 'visible'、'hidden'、'prerender' 或 'unloaded'，生产环境只需关注前两个
• 移动端 Safari 在后台播放音频时可能仍报告 'visible'，需结合 pagehide 事件兜底

计算真实浏览时长：从 visible 到 hidden 的时间差

单纯记录进入 visible 的时间点没用，关键是在状态切换时做差值累加。容易忽略的是页面卸载前最后一次 hidden 可能没触发——比如用户直接关掉标签页。