websocket未关闭必然导致内存泄漏，因tcp句柄、js实例及闭包上下文均无法回收；需通过chrome memory面板快照分析实例增长与引用链，并彻底清理连接、监听器和定时器三层资源。
WebSocket 未关闭是前端内存泄漏最确定、最直接的诱因——不是“可能泄漏”，而是“必然驻留”。只要没调 ws.close()，浏览器就认为连接仍活跃，底层 TCP 句柄、JS 实例、闭包上下文全部卡在堆里无法回收。
确认泄漏是否存在
打开 Chrome DevTools → Memory 面板 → 点 “Take heap snapshot” 拍摄快照，然后：
- 搜索
WebSocket，看实例数是否随页面反复挂载/卸载而持续增长（比如从 1 增到 15） - 点击任一 WebSocket 实例，查看右侧 “Retainers” 树：若显示被
Closure、window、全局数组或组件this强引用，说明它没被释放 - 对比两次快照（空闲态 vs 操作后），用 “Comparison” 视图筛选 “# New” 的 WebSocket 类型，确认增量来源
清理必须覆盖三层：连接本身 + 监听器 + 定时器
只关连接远远不够。监听器和定时器会把整个作用域锁死，让组件、state、ref 全部无法 GC。
-
连接关闭：务必在组件卸载前调用
ws.close()；不要依赖beforeUnmount或useEffect清理函数自动触发——它们不保证执行，尤其在强制刷新或异常退出时 -
监听器解绑：避免
ws.onmessage = (e) => this.handle(e)这类赋值写法；统一在ws.onclose中设为null：ws.onclose = () => { ws.onmessage = null; ws.onerror = null; ws.onopen = null; }; -
心跳定时器清理：把 timer ID 挂到
ws实例上（如ws.heartbeatTimer = setInterval(...)），并在ws.onclose中判空清除：if (ws.heartbeatTimer) { clearInterval(ws.heartbeatTimer); ws.heartbeatTimer = null; }
避免常见反模式
这些写法看似正常，实则埋下泄漏隐患：
- 在 Vue/React 组件中每次
mounted或useEffect都新建new WebSocket()，却不销毁旧实例 - 用自定义事件总线包装 WebSocket 消息，清空了总线 listeners，却忘了原始
ws.onmessage还挂着 - 把
ws存进全局单例或 context，但该单例没有destroy()方法，也没有绑定生命周期 - 误以为
ws.readyState === 0（CONNECTING）或3（CLOSED）就代表可安全丢弃——只要没调close()，实例仍强可达
推荐封装一个可销毁的连接管理器
把资源生命周期收口，避免散落各处的手动清理：
- 构造时创建
WebSocket，启动心跳，绑定onclose自动清理逻辑 - 暴露
destroy()方法，内部执行：
→ws.close()
→ 清空所有onxxx回调
→clearInterval(ws.heartbeatTimer)
→ 解除对组件上下文的任何引用（如取消 pending Promise、abort Fetch） - 在组件
unmounted或useEffectcleanup 函数中调用manager.destroy()
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
