HTML5 词条目录
前端Wiki/词条/页面可见性 API

页面可见性 API

定义检测当前标签页是否对用户可见,从而优化后台行为与统计准确性

document.hidden 返回布尔值表示是否可见,visibilitychange 事件在用户切换标签页、最小化窗口时触发。最常见的用途:视频在切到后台时自动暂停、轮播停止轮播、轮询与 WebSocket 心跳降频、动画暂停节省电量——既省资源又不打扰用户。

可见性 API 还能显著提升统计质量:只统计可见状态的停留时长,避免后台挂着刷时长。document.visibilityState 有 visible、hidden、prerender、unloaded 四种取值,prerender 表示页面在预渲染队列中。移动端部分浏览器有额外状态值,做关键逻辑时以 hidden 为准。

JavaScript
document.addEventListener('visibilitychange', function () {
  if (document.hidden) {
    console.log('页面切到后台了');
    // 例:暂停视频、停止轮询、保存草稿
  } else {
    console.log('页面回到前台,可以恢复刷新');
    // 例:发现新数据、恢复播放
  }
});
console.log('当前是否可见:', !document.hidden);
console.log('状态:', document.visibilityState);
⚠ 常见误区
🔗 相关词条浏览器组件
← 返回来源章节浏览器