第 03 天：学习 JavaScript API：页面可视性 API

# Web 开发 # JavaScript # 编程 # 初学者

您是否曾经遇到过这样的情况：当您忙于处理另一个选项卡时，YouTube 教程在一个选项卡中播放，后来才意识到视频仍在播放？大多数时候，您甚至不记得视频是在哪个选项卡中播放的。如果您和我一样，打开的选项卡太多，根本没法开始寻找视频。后台随机播放的视频会悄无声息地消耗您的电池电量和资源。

您不希望自己开发的应用以这种方式运行。幸运的是，JavaScript 拥有 **Page Visibility API**，它可以让您检测用户何时离开应用的选项卡。有了它，您可以暂停不必要的任务并节省用户宝贵的电池寿命。

今天，我们将了解有关 Page Visibility API 的所有知识：它是什么，它为什么有用，以及如何使用它来构建更好的应用程序。

读完本文后，您将确切了解如何将此 API 集成到您的项目中。

什么是页面可见性 API？

**页面可见性 API** 是一项浏览器功能，可帮助开发人员确定网页对用户是否可见或隐藏。当用户切换到另一个选项卡或最小化浏览器时，此 API 会触发一个事件，从而可以相应地调整应用的行为。

为什么要使用页面可见性 API？

此 API 非常方便，可以让您的应用更加智能。它的作用如下：

暂停资源密集型任务：当用户没有主动查看您的应用时停止动画、视频或计时器。

节省电池寿命：对于电池电量有限的移动用户特别有用。

改善用户体验：自动恢复暂停的任务，甚至在用户返回您的应用时向他们打招呼。

页面可见性 API 的工作原理

该 API 包含两个主要功能：

document.hidden：一个布尔值，告诉您页面是隐藏（true）还是可见（false）。

visibilitychange 事件：每当页面可见性发生变化时触发。

这是一个展示其工作原理的基本示例：

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('The page is hidden.');
  } else {
    console.log('The page is visible.');
  }
});

当用户切换选项卡或最小化浏览器时，此事件将运行，记录页面是否可见。

您可以使用页面可见性 API 执行的操作

1. 暂停和恢复计时器

如果您的应用程序有计时器，您可以使用此 API 在用户切换选项卡时暂停它，并在他们返回时恢复它。

let timer;
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(timer);
    console.log('Timer paused.');
  } else {
    timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
    console.log('Timer resumed.');
  }
});

2. 当用户返回时向他们问好

当用户返回时，通过欢迎他们回来为您的应用增添个性化的体验。

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    alert('Welcome back!');
  }
});

3. 优化视频资源使用

当用户离开页面时暂停视频，使您的应用更高效。

const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    video.pause();
    console.log('Video paused.');
  } else {
    video.play();
    console.log('Video resumed.');
  }
});

浏览器支持

Page Visibility API 在 Chrome、Firefox、Edge 和 Safari 等现代浏览器上都得到了很好的支持。对于较旧的浏览器，您可能需要实现回退。

**如何检查浏览器兼容性：**

您可以在 MDN 的 Page Visibility API 页面上检查兼容性。

限制

虽然这个 API 很棒，但了解它的局限性也很重要：

不能替代用户参与：API 只能告诉您页面是否可见，而不会告诉您用户是否正在主动与页面交互。

行为可能因浏览器而异：某些浏览器可能不会在所有情况下触发visibilitychange事件，因此请务必进行彻底的测试。

总结

Page Visibility API 可能不像其他 JavaScript API 那样受欢迎，但它是改善性能和用户体验的强大工具。通过在应用未使用时暂停不必要的任务，您不仅可以节省资源，还可以构建尊重用户设备和偏好的应用。

如果您有任何疑问或想分享您的想法，请随时通过 Twitter 给我留言：@sprucekhalifa。

下次见——祝你编程愉快！🎉

CLIS.CC