JavaScript监听用户离开页面-visibilitychange
visibilitychange 事件触发原理
用户离开或者回到指定页面，document.visibilityState 属性发生变化 就会触发 visibilitychange 事件 因此，可以通过监听这个事件跟踪页面可见性的变化，
补充：document.visibilityState 属性
在 HTML5 中，文档对象（即 document 对象）具有一个visibilityState属性，该属性表示当前文档对象的可见性状态。
visibilityState 可能的取值有以下三种：
- visible：表示文档当前处于激活状态，即当前选项卡处于前台或当前窗口处于屏幕最上层。
- hidden：表示文档当前处于非激活状态，即当前选项卡处于后台或当前窗口被最小化或被其他窗口遮盖。
- prerender：表示文档处于预渲染状态，即当前页面正在被预先加载并渲染，但尚未成为当前活动页面。
document.visibilityState属性是为了提高页面性能和节省资源而引入的新功能。在过去，开发人员通常会在页面上运行许多 JavaScript 动画或视频播放等操作，这些操作会消耗大量的 CPU、GPU 或网络带宽资源，从而影响页面的性能和响应速度。通过监视visibilityState属性，可以在用户切换选项卡或最小化窗口时暂停或恢复某些页面活动（如动画或视频播放）等操作，从而优化页面性能和用户体验。
代码实例：
代码语言：javascript复制document.addEventListener('visibilitychange', function () {
// 用户离开了当前页面
if (document.visibilityState === 'hidden') {
document.title = '页面不可见';
}
// 用户打开或回到页面
if (document.visibilityState === 'visible') {
document.title = '页面可见';
}
});
