第三方库实例未销毁是内存堆积的常见源头，需通过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