第三方库实例未销毁是内存堆积的常见源头，需通过Heap Snapshot对比、Retainers分析、全局引用检查及库专属销毁方法验证来识别和解决。
第三方库实例未销毁是内存堆积的常见源头，尤其在图表、地图这类重 DOM 和状态管理的库中表现明显。识别关键在于观察“组件卸载后，库实例是否还活着”——它不报错，但悄悄吃掉内存。
看浏览器内存快照里的“孤立节点”
打开 Chrome DevTools → Memory 面板 → 拍摄 Heap Snapshot。切换页面或销毁组件后，再拍一张。对比两次快照：
- 筛选 Constructor 名为 ECharts、L.Map 或 Leaflet 相关类名的对象，若数量不降反增，说明实例没被释放
- 点击可疑对象 → 查看 Retainers 栏：如果显示 window、document 或某个长期存活的 Vue/React 实例，说明它被意外持有
- 特别注意 CanvasElement、SVGElement 及其父容器是否仍挂在 DOM 树中（即使 display: none）
查控制台是否有残留的全局引用或定时器
很多库内部会注册 resize 监听、动画帧 requestAnimationFrame、轮询定时器等。这些若没随实例销毁而清理，就会持续运行并持有所属对象：
ECharts Master
下载
ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。
- 在组件销毁后执行 console.log(window.__echarts_instances__)（ECharts 4+ 提供的全局实例列表），看数组长度是否清零
- 搜索 setInterval、setTimeout、requestAnimationFrame 的残留句柄（可用 performance.getEntriesByType('navigation') 辅助判断页面是否真跳转）
- Leaflet 地图常用 map.remove()，但若漏掉 L.DomEvent.off(map._container, 'resize', ...)，resize 回调仍会触发
用 Performance 面板验证“重复初始化-销毁”行为
录制一次完整的组件挂载 → 销毁 → 再挂载流程：
- 关注 Memory 轨迹是否阶梯式上升（每次销毁后内存未回落到初始水平）
- 查看 Summary 中 “JS Heap” 和 “Nodes” 曲线是否同步增长，Node 数持续不归零，往往对应未移除的 DOM + 库绑定事件
- 留意 “Event Listener” 数量：若每次销毁后监听器总数不减少，大概率是 removeEventListener 没配对调用
借助库自身提供的销毁方法做一致性校验
别依赖“组件卸载了，库就自动收摊”。必须显式调用其销毁接口，并验证效果：
- ECharts：myChart.dispose() 后检查 myChart.isDisposed === true，且 DOM 容器内应无 canvas/svg 子节点
- Leaflet：map.remove() 后执行 map._initHooksCalled = false（仅调试用），再尝试 map.setView(...) 应抛错
- 若使用 Vue 封装，确保在 beforeUnmount（Vue 3）或 beforeDestroy（Vue 2）中调用，而非 mounted 或 unmounted
