页面隐藏后需主动关闭WebSocket连接并清理资源——调用ws.close()、清除监听器和定时器，visibilitychange中执行终止而非暂停，重连前延迟并校验网络与服务状态，beforeunload和组件卸载时双重兜底清理。

页面隐藏后废弃的 WebSocket 连接不会自动断开，必须主动清理——浏览器不感知页面可见性变化对连接的影响，只要连接实例还活着、监听器还挂着、定时器还在跑，内存和系统资源就会持续占用。

判断连接是否真已废弃

别只看页面是否切到后台或标签页是否失焦。关键要看 WebSocket 实例本身是否还被持有：

• 检查 document.hidden 或 visibilityState 只是辅助信号，不能替代资源清理逻辑
• 用 Chrome DevTools 的 Memory 面板 → Heap Snapshot 搜索 WebSocket，确认实例数量是否随页面隐藏/切换而增长
• 查看 Retainers，若显示被全局变量、组件实例、闭包或未清除的定时器引用，说明它没被释放

页面隐藏时主动关闭并解绑

在 visibilitychange 事件中触发清理，但注意：不是“暂停”，而是“终止+重建”的准备动作：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 调用 ws.close()（即使 readyState 是 CLOSED 或 CONNECTING，也应调用）
• 清除所有事件监听器：ws.onmessage = null; ws.onerror = null; ws.onclose = null;
• 清除心跳定时器：if (ws.heartbeatTimer) clearInterval(ws.heartbeatTimer);
• 终止关联的 fetch 请求（如有）：abortController?.abort();

页面重新可见时谨慎重连

不要在 visibilitychange 触发时立刻重连——用户可能只是短暂切走，且重连失败会加剧状态混乱：

立即学习“Java免费学习笔记（深入）”；

• 设置延迟重连（如 2–3 秒），避免频繁切换导致连接风暴
• 重连前先检查 navigator.onLine 和服务端健康状态
• 用唯一标识（如连接 ID 或时间戳）标记每次连接，防止旧连接残留监听器干扰新连接

配合 beforeunload 做兜底清理

页面刷新或关闭前，确保连接彻底终结：

• 注册 beforeunload 监听器，仅执行 ws.close()，不返回值、不调 preventDefault
• 在 React/Vue 组件卸载钩子中再次调用关闭逻辑（双保险）
• 避免将 WebSocket 实例挂到 window 或模块顶层变量，否则无法随组件生命周期回收