【visibilitychange】：获取当前页面可见性，深入解析，提升网页性能与用户体验的关键事件

目录

第一章 前言

第二章 visibilitychange 事件简介

第三章 触发visibilitychange变更的情况

第四章 应用场景

4.1 优化资源加载

4.2 节省服务器资源

4.3 改善用户体验

第五章 实现细节

5.1 兼容性

5.2 性能优化

第六章 典例

第七章 总结

第一章 前言

在现代网页开发中，提升用户体验和优化性能是至关重要的目标。visibilitychange事件作为浏览器提供的一个强大工具，能够帮助开发者实现这些目标。小编刚好在实现一个竞价间（后续小编也会把这个竞价间的功能总结出来）的需求中遇到了，这里小编即将在本文将深入探讨visibilitychange事件的原理、应用场景以及如何在实际开发中有效利用它。

第二章 visibilitychange 事件简介

visibilitychange 是一个浏览器事件，当文档的可见性状态发生变化时触发。它主要与 Document 对象的 visibilityState 属性配合使用。visibilityState 可以取以下几种值：

• visible：文档至少部分可见。
• hidden：文档完全不可见。
• prerender：文档处于预渲染状态，用户尚未与之交互。
• unloaded：文档即将被卸载。

通过监听 visibilitychange 事件，开发者可以在文档可见性状态变化时执行相应的操作，从而优化资源使用和提升用户体验。

第三章 触发visibilitychange变更的情况

• pc端

1. 页面可见时，用户关闭 Tab 页或浏览器窗口。
2. 页面可见时，用户在当前窗口前往另一个页面。
3. 页面不可见时，用户或系统关闭浏览器窗口。

• 移动端H5（这里说是把H5嵌入其他app的项目，使用的还是写pc端的逻辑，只是做了移动端适配！uniapp、微信小程序除外，他们有自己的生命周期钩子）

1. 页面可见时，切到后台
2. 页面不可见时，从后台切回展示

第四章 应用场景

4.1 优化资源加载

当用户将浏览器标签页切换到后台时，页面的可见性状态变为 hidden。此时，可以暂停一些非必要的资源加载，如视频、音频、动态效果等。例如：

1document.addEventListener('visibilitychange', () => {
2    if (document.visibilityState === 'hidden') {
3        // 暂停视频播放
4        video.pause();
5    } else if (document.visibilityState === 'visible') {
6        // 恢复视频播放
7        video.play();
8    }
9});

这种做法可以节省系统资源，减少电量消耗等等，尤其在移动设备上效果显著。

4.2 节省服务器资源

**对于一些需要频繁与服务器交互的应用，**如实时数据更新或推送通知，可以在页面不可见时减少或暂停这些操作。例如：

1let intervalId;
2document.addEventListener('visibilitychange', () => {
3    if (document.visibilityState === 'hidden') {
4        clearInterval(intervalId); // 停止轮询
5    } else if (document.visibilityState === 'visible') {
6        intervalId = setInterval(fetchData, 5000); // 每5秒更新一次数据
7    }
8});

这种做法可以减少服务器的负载，同时避免在用户未查看页面时进行不必要的数据传输。

4.3 改善用户体验

当页面从后台切换到前台时，可以利用 visibilitychange 事件重新加载或更新页面内容。例如，更新新闻文章的评论区、显示最新的消息通知等。这可以确保用户在返回页面时看到最新的内容，提升用户体验。

第五章 实现细节

5.1 兼容性

• visibilitychange 事件在现代浏览器中得到了广泛支持，但在一些旧版本浏览器中可能不存在。因此，在使用时需要进行兼容性检查：

1if (document.hidden !== undefined) {
2    document.addEventListener('visibilitychange', () => {
3        // 处理可见性变化
4    });
5} else {
6    // 提供兼容性解决方案或降级处理
7}

5.2 性能优化

在处理 visibilitychange 事件时，需要注意避免执行过于复杂的操作，以免重新渲染时影响页面性能。例如，可以将一些耗时的操作放入 requestAnimationFrame 或 setTimeout 中，以减少对主线程的阻塞。

第六章 典例

这是小编本次需求的例子——

• 初始化值：

• 添加visibilitychange监听函数（最后记得销毁）

1async mounted() {
2    document.addEventListener('visibilitychange', () => {
3        this.handleVisibilityChange()
4    })
5},

• 方法如下：

1async handleVisibilityChange() {
2    this.visibilityState = document.visibilityState
3    if (this.visibilityState === 'hidden') {
4        // 标签页隐藏时的操作
5        console.log('页面隐藏')
6        // 这里时断开websocket连接
7        closeSignWs()
8        closeBidWs()
9    } else if (
10        this.$refs.roomWrapper &&
11        this.visibilityState === 'visible'
12    ) {
13        // 当标签页可见时重新做初始话，并重连ws等操作
14        this.initInfo()
15        this.signList = []
16        this.institutionList = []
17        await this.getTimeStamp()
18        await this.getProjectInfo()
19        await this.initWebsocket()
20        // 标签页可见时的操作
21        console.log('页面可见')
22    }
23},

第七章 总结

visibilitychange 事件为开发者提供了一个强大的工具，用于优化网页性能和提升用户体验。通过合理利用这一事件，可以在页面不可见时节省资源，在页面可见时及时更新内容。在实际开发中，需要注意兼容性和性能优化，以确保最佳效果。希望本文能够帮助开发者更好地理解和使用 visibilitychange 事件，为用户提供更流畅、更高效的网页体验。

《【visibilitychange】：获取当前页面可见性，深入解析，提升网页性能与用户体验的关键事件》 是转载文章，点击查看原文。