JS实现页面可见性监控？手把手教你用这5个visibilityAPI

还在为JS无法准确感知页面可见性而烦恼吗？本文为你解读如何利用Page Visibility API轻松掌握页面状态。通过`document.visibilityState`属性，你可以实时获取页面是“可见”还是“隐藏”等状态。监听`visibilitychange`事件，即可在页面状态改变时触发相应操作，结合`requestAnimationFrame`优化动画，甚至还能利用`Intersection Observer API`检测元素是否进入视口。掌握这些技巧，能有效优化资源消耗，例如暂停视频播放和停止数据轮询，从而显著提升网站性能和用户体验。同时，文章还提供了兼容性问题的polyfill解决方案，以及在单页应用中`Intersection Observer`的应用场景，助你打造更智能、更高效的Web应用。

JS监听页面可见性可通过Page Visibility API实现，1.使用document.visibilityState属性获取页面状态，值为"visible"或"hidden"等；2.监听document上的visibilitychange事件以触发相应操作；3.结合requestAnimationFrame控制动画执行；4.使用Intersection Observer API检测元素是否进入视口。监听页面可见性可优化资源消耗，如暂停视频播放、停止数据轮询等，提升性能与用户体验。对于兼容性问题，可通过polyfill方案模拟visibilitychange行为。此外，在单页应用中，Intersection Observer可用于动态监测主要内容区域的可见状态。

JS怎样监听页面可见性？简单来说，就是用一些API来感知用户是不是真的在看你的网页，而不是切到别的标签页或者最小化了。这很重要，因为你可以根据这个状态来优化你的应用，比如暂停视频播放、停止轮询数据等等，节省资源，提升用户体验。

解决方案

JS提供了一些原生的API来帮助我们实现这个功能，让我们能精确地知道页面在用户眼前的状态。

• document.visibilityState: 这个属性告诉你当前页面的可见状态。它的值可以是 "visible" (可见), "hidden" (隐藏), "prerender" (预渲染), 或 "unloaded" (卸载)。这是最常用的一个属性，直接告诉你页面是不是在用户的视线范围内。

• visibilitychange 事件: 当页面的可见状态改变时，会触发这个事件。你可以在 document 上监听这个事件，然后根据 document.visibilityState 的值来执行相应的操作。这比定时检查 document.visibilityState 要高效得多。

• Page Visibility API: document.hidden 属性，虽然现在用的不多，但还是有必要了解一下。它是一个布尔值，告诉你页面是否隐藏。相当于 document.visibilityState === 'hidden' 的简写。

• requestAnimationFrame: 虽然它不是直接用来检测可见性的，但可以结合使用。当页面不可见时，浏览器会暂停 requestAnimationFrame 的回调，所以你可以利用这一点来判断页面是否可见，从而停止一些动画或渲染操作。

• Intersection Observer API: 这个API主要用于检测元素是否进入视口，但你也可以用它来间接检测页面是否可见。如果你的页面只有一个主要内容区域，你可以监听这个区域是否进入视口，从而判断页面是否可见。

为什么需要监听页面可见性？页面隐藏时暂停不必要的资源消耗

监听页面可见性，最直接的好处就是优化性能。想象一下，如果用户切换到其他标签页，你的网页还在不停地发送请求、播放视频、执行动画，那简直就是在浪费用户的电量和流量。通过监听 visibilitychange 事件，你可以在页面隐藏时暂停这些操作，等到页面重新可见时再恢复。这对于移动设备尤其重要，可以显著延长电池续航。

visibilitychange 事件的兼容性问题及polyfill方案

虽然 visibilitychange 事件已经得到了广泛的支持，但在一些老版本的浏览器中可能仍然存在兼容性问题。为了解决这个问题，你可以使用一些 polyfill 方案。这些 polyfill 通常会通过定时检查 document.hidden 属性来模拟 visibilitychange 事件的行为。当然，使用 polyfill 会带来一些额外的性能开销，所以在选择时需要权衡利弊。一个简单的polyfill方案可以这样实现：

if (typeof document.hidden !== "undefined") {
  // Use the standard property and event
  var hidden = "hidden",
      visibilityChange = "visibilitychange",
      visibilityState = "visibilityState";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
  visibilityState = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
  visibilityState = "webkitVisibilityState";
}

document.addEventListener(visibilityChange, function() {
  if (document[hidden]) {
    // 页面隐藏时执行的操作
    console.log("页面隐藏");
  } else {
    // 页面可见时执行的操作
    console.log("页面可见");
  }
}, false);

如何利用 requestAnimationFrame 优化动画效果？

requestAnimationFrame 的一个重要特性是，当页面不可见时，浏览器会自动暂停其回调函数的执行。这意味着你可以利用 requestAnimationFrame 来优化动画效果，避免在页面隐藏时浪费资源。例如，你可以将动画逻辑放在 requestAnimationFrame 的回调函数中，并在页面可见时启动动画，页面隐藏时停止动画。这样可以确保动画只在用户真正看到的时候才执行，从而提高性能和用户体验。

let animationFrameId;

function animate() {
  // 动画逻辑
  console.log("执行动画");
  animationFrameId = requestAnimationFrame(animate);
}

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    // 页面隐藏时停止动画
    cancelAnimationFrame(animationFrameId);
  } else {
    // 页面可见时启动动画
    animationFrameId = requestAnimationFrame(animate);
  }
});

// 初始启动动画
animationFrameId = requestAnimationFrame(animate);

Intersection Observer API 在单页应用中的应用场景

在单页应用（SPA）中，页面内容通常是动态加载的，这意味着你可能需要更灵活的方式来检测页面是否可见。Intersection Observer API 可以帮助你实现这一点。你可以监听页面主要内容区域的可见性，从而判断页面是否在用户的视线范围内。例如，你可以创建一个 IntersectionObserver 实例，监听根元素为 document.documentElement，然后观察页面中的主要内容区域。当内容区域进入视口时，你可以认为页面是可见的，反之则认为页面是隐藏的。这种方式比直接监听 visibilitychange 事件更加灵活，可以适应各种复杂的页面结构。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。