document.hidden 返回布尔值表示是否可见,visibilitychange 事件在用户切换标签页、最小化窗口时触发。最常见的用途:视频在切到后台时自动暂停、轮播停止轮播、轮询与 WebSocket 心跳降频、动画暂停节省电量——既省资源又不打扰用户。
可见性 API 还能显著提升统计质量:只统计可见状态的停留时长,避免后台挂着刷时长。document.visibilityState 有 visible、hidden、prerender、unloaded 四种取值,prerender 表示页面在预渲染队列中。移动端部分浏览器有额外状态值,做关键逻辑时以 hidden 为准。
document.addEventListener('visibilitychange', function () { if (document.hidden) { console.log('页面切到后台了'); // 例:暂停视频、停止轮询、保存草稿 } else { console.log('页面回到前台,可以恢复刷新'); // 例:发现新数据、恢复播放 } }); console.log('当前是否可见:', !document.hidden); console.log('状态:', document.visibilityState);