乐趣区

关于前端:重学-JavaScript-API-Page-Visibility-API

jiezi

在前端开发中，咱们常常须要依据页面的可见性来管制资源的应用和进步页面的性能和响应速度。而 JavaScript 中的 Page Visibility API 就提供了一种 检测页面是否可见 的办法。

本文将介绍 Page Visibility API 的概念、应用办法、兼容性和理论利用案例。

🍰什么是 Page Visibility API？

Page Visibility API 是一种浏览器 API，它提供了一种 检测页面是否可见 的办法。通过 Page Visibility API，咱们能够晓得 以后页面是否被暗藏或者最小化，从而能够依据页面的可见性来管制页面的行为和资源的应用。

Page Visibility API 提供了 2 个属性和 1 个事件，别离是：

1. 属性

  1. document.hidden：只读，示意 以后页面是否被暗藏，如果页面被暗藏返回 true，否则返回 false。
  2. document.visibilityState：只读，示意 以后页面的可见性状态，可能的取值有：
  • visible：以后页面可见，即页面是非最小化窗口的前景选项卡。
  • hidden：以后页面被暗藏，即页面能够是一个后盾标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。
  • prerender：以后页面正在预加载。
  • unloaded：以后页面正在卸载，局部浏览器不反对。

2. 办法

  • visibilitychange：当页面的可见性状态发生变化时触发该事件。

🍭 Page Visibility API 的应用场景

Page Visibility API 能够利用于很多场景，比方：

  1. 视频播放器

在视频播放期间，能够应用 Page Visibility API 来检测页面是否可见。如果页面不可见，能够通过暂停视频来节俭资源和带宽。当页面从新变为可见时，能够复原播放。

  1. 实时音讯告诉

如果咱们网页须要向用户发送实时告诉，就能够应用 Page Visibility API 来检测页面是否可见，如果页面不可见，就不会发送告诉。当用户从新关上页面时，咱们能够再次查看，并确保他们看到任何未读音讯。

  1. 主动保留表单数据

如果用户在表单上输出了大量数据，而且在填写过程中来到了页面，咱们能够应用 Page Visibility API 确定何时来到页面，并主动保留表单数据，以便当前再次拜访。

  1. 游戏应用程序

如果咱们正在开发一个基于 Web 的游戏，就能够应用 Page Visibility API 暂停和复原游戏，以便玩家可能在来到游戏时不会失落任何进度。

  1. 网页埋点统计分析

应用 Page Visibility API 能够收集更精确的拜访次数，以便更好地剖析用户行为。

  1. 网页性能测量

应用 Page Visibility API 能够测量页面加载工夫和页面卸载工夫，帮忙您优化网站性能。

  1. 页面缓存

如果应用 Page Visibility API 的网站被用户退出，那么通过记录缓存状态，能够更好地治理页面的缓存，以便下次更快的拜访。

当然还有更多应用场景，本文不再过多介绍。

🍬 如何应用 Page Visibility API？

应用 Page Visibility API 非常简单，只须要在 JavaScript 中监听 visibilitychange 事件即可。以下是一个简略的示例：

document.addEventListener("visibilitychange", function () {if (document.hidden) {// 页面被暗藏} else {// 页面可见}
});

在以上示例中，咱们应用了 visibilitychange 事件来监听页面的可见性状态变动，当页面被暗藏时，咱们能够执行一些操作，当页面从新可见时，咱们也能够执行一些操作。

🧭 Page Visibility API 的兼容性

Page Visibility API 并不是所有浏览器都反对，咱们须要在应用之前查看浏览器是否反对该 API。以下是一些浏览器的反对状况：

  • Chrome：反对。
  • Firefox：反对。
  • Safari：反对。
  • IE：反对 IE10+。
  • Edge：反对。

具体能够查看「Page Visibility API」。

如果须要兼容不反对 Page Visibility API 的浏览器，咱们能够应用 Polyfill 或者其余的检测办法来实现。

🎁 Page Visibility API 的理论利用案例

以下是一些 Page Visibility API 的理论利用案例：

1. 依据页面的可见性来管制视频播放

点击 demo 查看。

2. 依据页面的可见性来管制动画执行

在页面中创立小球，其地位随着工夫的推移而变动。应用 Page Visibility API，能够在页面不可见时进行动画，并在页面从新变为可见时复原动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation Control Using Page Visibility API</title>
    <style>
      #ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div id="ball"></div>
    <script>
      window.addEventListener("DOMContentLoaded", function () {var ball = document.getElementById("ball");
        ball.style.top = 0;
        ball.style.left = 0;
        var speedX = 2;
        var speedY = 3;
        function move() {var top = parseFloat(ball.style.top);
          var left = parseFloat(ball.style.left);

          // 确保小球不会移出屏幕
          if (top < 0 || top > window.innerHeight - 50) {speedY = -speedY;}
          if (left < 0 || left > window.innerWidth - 50) {speedX = -speedX;}
          ball.style.top = top + speedY + "px";
          ball.style.left = left + speedX + "px";
        }

        var timer = setInterval(function () {move();
        }, 10);

        document.addEventListener("visibilitychange", function () {if (document.visibilityState === "hidden") {clearInterval(timer);
          } else {timer = setInterval(function () {move();
            }, 10);
          }
        });
      });
    </script>
  </body>
</html>

其中 setInterval() 是一个循环函数，它能够间断执行函数的代码，实现动画成果。在本例中，move() 函数一直批改球的地位（通过批改 CSS 中的 top 和 left 属性），并在达到屏幕边缘时将其反转。页面可见性通过 visibilitychange 事件进行监测，当页面从可见到不可见时进行动画，反之则复原动画。

🍀 总结

通过本文的介绍，咱们理解了 Page Visibility API 的概念、应用办法、兼容性和理论利用案例。在理论开发中，咱们能够依据页面的可见性来管制资源的应用，进步用户体验和性能优化。如果你想深刻理解 Page Visibility API，能够参考以下文档：

  • MDN 文档
  • W3C 标准
退出移动版