页面可见性API通过document.visibilityState和visibilitychange事件检测页面是否可见，其状态值包括visible、hidden、prerender和unloaded；当标签页切换时触发visibilitychange事件，开发者可据此暂停视频、停止轮询或动画等操作以优化性能；例如控制轮播图在页面隐藏时停止、恢复时重启，从而节省资源并提升用户体验。
当用户切换浏览器标签页时，有时需要让页面暂停某些操作，比如视频播放、轮询请求或动画效果。JavaScript 提供了 Page Visibility API，可以监听页面是否处于可见状态，从而优化性能和用户体验。
什么是页面可见性 API？
Page Visibility API 允许开发者检测当前页面是否处于“可见”状态。它通过 document.visibilityState 属性和 visibilitychange 事件来实现。
document.visibilityState 返回一个字符串，可能的值有：
- visible：页面在前台且可见（正常浏览）
- hidden：页面不可见（最小化、切换标签、锁屏等）
- prerender：页面正在预渲染（少见）
- unloaded：页面即将卸载（已废弃）
如何监听标签页状态变化？
使用 visibilitychange 事件监听页面可见性变化：
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('visibilitychange', function() {
if (document.visibilityState === 'hidden') {
console.log('页面已隐藏');
// 可以暂停视频、停止轮询、关闭动画
} else {
console.log('页面恢复可见');
// 恢复播放、重启定时任务
}
});
实际应用场景示例
以下是一些常见用途：
- 暂停视频或音频播放，节省流量和资源
- 停止不必要的定时器（如每秒更新的数据请求）
- 避免在不可见时执行复杂计算或动画
- 记录用户停留时间（只在 visible 状态下计时）
例如，控制自动轮播图：
let interval;
function startCarousel() {
interval = setInterval(() => {
// 轮播逻辑
}, 3000);
}
function stopCarousel() {
clearInterval(interval);
}
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
stopCarousel();
} else {
startCarousel();
}
});
// 初始化
startCarousel();
兼容性与注意事项
现代浏览器普遍支持 Page Visibility API。如果需要兼容老版本 IE，可添加前缀检查：
const visibilityEvent = 'visibilitychange'; // 更完整的监听可考虑兼容旧版 WebKit document.addEventListener(visibilityEvent, handleVisibilityChange);
注意：该 API 不会监听页面是否被遮挡（如弹窗覆盖），仅反映是否在当前标签可见。
基本上就这些。用好 visibilitychange 事件，能有效提升网页性能和资源利用率。不复杂但容易忽略。
