前端页面不在前台时你还能这样做？

作为前端开发，是否想过当我们使用浏览器访问一个网页时，如果最小化了窗口或者切换到了别的标签页，这时候我们是否还能做点什么？网页不再是用户当前所关注的内容，也就失去了一些交互和展示的意义。类似于微信小程序当中存在 onShow onHide 这种生命周期事件。为了更好地利用页面，提高用户体验，我们可以使用前端Page Visibility API。

Page Visibility API 允许开发者检测文档当前是否可见，需要在状态变化时执行特定的操作。当浏览器的标签页处于不可见状态时，我们可以暂停页面中的某些操作。在标签页重新变为可见时继续运行，或者在用户返回网页时加载一些数据，优化用户体验。

Page Visibility API中最基础的方法是document.visibilityState，它返回的是一个字符串，表示当前文档的可见状态。可见状态有以下几种：

• visible：文档当前可见，当前窗口在前台。
• hidden：文档当前不可见，当前窗口在后台。
• prerender：文档当前正在预渲染，即浏览器在后台渲染文档，但用户还没有看到。
• unloaded：文档已经被卸载，或者用户还没有访问过这个页面。

下面给大家介绍一些常见的应用场景。

页面暂停或继续

当页面被切换到其他标签页或者最小化时，我们可以暂停某些操作，如视频播放、动画效果等，以节省浏览器资源，避免额外的资源消耗。而当页面重新变为可见时，我们可以恢复这些操作，为用户提供更好的体验。

function handleVisibilityChange() {
  if (document.hidden) {
    // 页面不可见，暂停操作
    pauseVideo();
  } else {
    // 页面可见，恢复操作
    resumeVideo();
  }
}

// 监听文档可见性变化
document.addEventListener("visibilitychange", handleVisibilityChange, false);

后台任务操作

有些任务需要在后台操作，如后台渲染、异步数据获取、Web Worker 运行等。这些任务并不需要在用户前台时就一直运行，而是会在完成后台计算后通知前台进行交互。

function startBackgroundTask() {
  var worker = new Worker("background.js");
  worker.onmessage = function(event) {
    if (document.hidden) {
      // 页面不可见，通知用户
      showNotification();
    } else {
      // 页面可见，更新UI
      updateUI(event.data);
    }
  };
}

渲染性能优化

当浏览器的标签页处于不可见状态时，页面可能会降低渲染效率，浪费系统资源。我们可以暂停某些渲染操作，以优化性能。

function handleVisibilityChange() {
  if (document.hidden) {
    // 页面不可见，暂停渲染
    cancelAnimationFrame(rafId);
  } else {
    // 页面可见，恢复渲染
    rafId = requestAnimationFrame(render);
  }
}

// 监听文档可见性变化
document.addEventListener("visibilitychange", handleVisibilityChange, false);

兼容性

以下是本API对应的兼容性视图，从图片上看的出来常用的系统平台几乎都是支持的。