JavaScript 页面可见性-监听用户离开页面-visibilitychange 事件

JavaScript监听用户离开页面-visibilitychange

visibilitychange 事件触发原理

用户离开或者回到指定页面，document.visibilityState 属性发生变化 就会触发 visibilitychange 事件 因此，可以通过监听这个事件跟踪页面可见性的变化，

补充：document.visibilityState 属性

在 HTML5 中，文档对象（即 document 对象）具有一个visibilityState属性，该属性表示当前文档对象的可见性状态。

visibilityState 可能的取值有以下三种：

• visible：表示文档当前处于激活状态，即当前选项卡处于前台或当前窗口处于屏幕最上层。
• hidden：表示文档当前处于非激活状态，即当前选项卡处于后台或当前窗口被最小化或被其他窗口遮盖。
• prerender：表示文档处于预渲染状态，即当前页面正在被预先加载并渲染，但尚未成为当前活动页面。

document.visibilityState属性是为了提高页面性能和节省资源而引入的新功能。在过去，开发人员通常会在页面上运行许多 JavaScript 动画或视频播放等操作，这些操作会消耗大量的 CPU、GPU 或网络带宽资源，从而影响页面的性能和响应速度。通过监视visibilityState属性，可以在用户切换选项卡或最小化窗口时暂停或恢复某些页面活动（如动画或视频播放）等操作，从而优化页面性能和用户体验。

代码实例：

document.addEventListener('visibilitychange', function () {
  // 用户离开了当前页面
  if (document.visibilityState === 'hidden') {
    document.title = '页面不可见';
  }

  // 用户打开或回到页面
  if (document.visibilityState === 'visible') {
    document.title = '页面可见';
  }
});