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

最新推荐文章于 2024-04-13 15:50:45 发布

蔚说

最新推荐文章于 2024-04-13 15:50:45 发布

阅读量1.5k

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.youkuaiyun.com/opinion001/article/details/131224500

版权

本文介绍了如何使用JavaScript的visibilitychange事件来监听用户是否离开页面，以及document.visibilityState属性的三个可能状态：visible、hidden和prerender。通过监听这个事件和属性，可以优化页面性能，比如在页面不可见时暂停资源消耗大的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript监听用户离开页面-visibilitychange

📒博客首页：蔚说的博客
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙏作者水平很有限，如果发现错误，求告知，多谢！
🌺有问题可私信交流！！！
本文仅供学习交流，如有侵权请联系我删除
case使用方法 JavaScript监听用户离开页面-visibilitychange visibilitychange 事件触发原理补充：document.visibilityState 属性代码实例：

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 = '页面可见';
  }
});