EnlightenCode

页面可见性 API 详解 👀 ​

什么是 Page Visibility API？ ​

Page Visibility API 提供了一种方法来检测网页是否对用户可见。当用户切换标签页、最小化浏览器窗口时，浏览器会触发 visibilitychange 事件。

核心概念 🔑 ​

1. visibilitychange 事件 ​

当文档可见性发生变化时触发此事件。

2. 相关属性 ​

  • document.visibilityState：返回文档可见性状态
    • visible: 页面可见
    • hidden: 页面不可见
    • prerender: 页面正在预渲染
    • unloaded: 页面正在卸载
  • document.hidden：布尔值，表示页面是否隐藏（已废弃，建议使用 visibilityState）

使用方法 💻 ​

javascript
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    console.log("页面可见，重新开始操作");
    // 恢复页面操作
    resumeOperation();
  } else {
    console.log("页面不可见，暂停操作");
    // 暂停页面操作
    pauseOperation();
  }
});

实际应用场景 🎯 ​

1. 媒体控制 🎵 ​

javascript
const video = document.querySelector('video');

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    video.pause();
  } else {
    video.play();
  }
});

2. 性能优化 ⚡ ​

javascript
let intervalId;

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    // 停止数据轮询
    clearInterval(intervalId);
  } else {
    // 恢复数据轮询
    intervalId = setInterval(fetchData, 1000);
  }
});

3. 游戏状态控制 🎮 ​

javascript
document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    game.pause();
    saveGameState();
  } else {
    game.resume();
  }
});

浏览器兼容性 🌐 ​

  • ✅ Chrome 33+
  • ✅ Firefox 18+
  • ✅ Safari 7+
  • ✅ Edge 12+
  • ✅ Opera 20+

注意事项 ⚠️ ​

  1. 不要过度依赖此 API 进行关键业务逻辑处理
  2. 考虑移动设备上的特殊情况（如画中画模式）
  3. 建议配合其他事件（如 blur、focus）一起使用
  4. 在添加事件监听时注意及时清理

最佳实践 👍 ​

javascript
class VisibilityManager {
  constructor() {
    this.handlers = new Set();
    this.bindVisibilityChange = this.handleVisibilityChange.bind(this);
    document.addEventListener("visibilitychange", this.bindVisibilityChange);
  }

  handleVisibilityChange() {
    const isVisible = document.visibilityState === "visible";
    this.handlers.forEach(handler => handler(isVisible));
  }

  subscribe(handler) {
    this.handlers.add(handler);
    return () => this.handlers.delete(handler);
  }

  destroy() {
    document.removeEventListener("visibilitychange", this.bindVisibilityChange);
    this.handlers.clear();
  }
}

// 使用示例
const visibilityManager = new VisibilityManager();
const unsubscribe = visibilityManager.subscribe(isVisible => {
  console.log(isVisible ? "页面可见" : "页面隐藏");
});

总结 📝 ​

Page Visibility API 是一个强大的工具，能够帮助我们优化用户体验、提升应用性能。合理使用这个 API 可以让我们的应用更加智能和用户友好。