HTML5页面可见性API是一组用来判断当前文档是否对用户可见的接口，主要包含document.hidden属性和visibilitychange事件。利用它可以在用户切换标签页或最小化浏览器时，暂停动画、停止轮询请求或记录停留时间。
核心属性与事件
Page Visibility API主要依赖以下两个内容：
document.hidden：布尔值，true表示页面当前不可见。document.visibilityState：返回字符串，常见值有visible、hidden、prerender。visibilitychange事件：当可见性状态改变时触发。
基础使用示例
下面代码演示如何监听页面可见性变化并输出状态：
// 监听可见性变化
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
console.log('页面已隐藏，可暂停任务');
} else {
console.log('页面可见，可恢复任务');
}
});
// 初始状态输出
console.log('当前状态：' + document.visibilityState);
实际应用场景
暂停轮询请求
当页面隐藏时清除定时器，显示时重新开启，减少服务器压力。
var timer = null;
function startPoll() {
timer = setInterval(function() {
// 发送请求获取数据
console.log('轮询中');
}, 5000);
}
function stopPoll() {
clearInterval(timer);
}
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
stopPoll();
} else {
startPoll();
}
});
startPoll();
自动暂停视频
如果页面中有video元素，可以在隐藏时调用pause()。
var video = document.querySelector('video');
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
video.pause();
} else {
video.play();
}
});
浏览器兼容说明
大部分现代浏览器都支持该API，部分老版本需要加前缀，可用以下写法兼容：
var hidden = document.hidden ||
document.webkitHidden ||
document.msHidden || false;
var visibilityEvent = 'visibilitychange';
if (typeof document.webkitHidden !== 'undefined') {
visibilityEvent = 'webkitvisibilitychange';
}
| 属性 | 说明 |
|---|---|
| document.hidden | 页面是否不可见 |
| document.visibilityState | 具体可见性状态 |
| visibilitychange | 状态变化事件 |
小结
HTML5页面可见性API使用简单，却能明显提升页面性能和用户体验。只要在需要节省资源或控制媒体播放的地方加上visibilitychange监听，就能轻松判断页面是否被用户看到。
HTML5PageVisibilityAPI页面可见性修改时间：2026-07-27 08:48:09