检查第三方图表插件是否引发内存溢出，关键是主动验证其卸载后资源是否真正释放：先禁用插件对比内存曲线，确认为源头；再查 dispose()/destroy() 等销毁接口是否在 beforeUnmount 或 useEffect cleanup 中正确调用；最后三连拍堆快照，聚焦 ECharts、CanvasRenderingContext2D 等构造函数及 (detached) DOM 和 Closure 引用链。
检查第三方图表插件是否引发内存溢出，关键不是等页面卡死再行动，而是主动验证它在组件卸载、图表销毁后是否真正释放资源。这类插件（如 ECharts、Chart.js、MapV-Three、AntV 等）常通过 DOM 挂载、事件监听、定时器重绘、Canvas/WebGL 上下文、闭包缓存数据等方式驻留内存，一旦缺少显式销毁逻辑或销毁不彻底，就容易造成内存持续累积。
先隔离验证：确认是不是它的问题
避免把问题归给插件却忽略自身代码。最直接的方法是临时禁用该插件：
- 注释掉初始化代码（如 echarts.init(dom) 或 new Chart(ctx)），保持其余逻辑不变
- 在相同操作路径下（比如反复进入/退出图表页），用 performance.memory.usedJSHeapSize 打点或 Memory 面板录制 JS Heap 曲线
- 对比启用/禁用状态下的内存变化：若禁用后内存不再阶梯上涨，基本锁定插件为源头
查销毁接口和调用时机
多数成熟图表库都提供销毁方法，但容易被忽略或调用错误：
- 确认文档是否声明了 dispose()、destroy()、clear() 或 off() 等清理接口（例如 ECharts 的 chart.dispose()，Chart.js 的 chart.destroy()）
- 检查是否在正确生命周期中调用：Vue 用 beforeUnmount，React 用 useEffect cleanup，不要放在 unmounted 后或异步回调里
- 特别注意单页应用中路由跳转时，组件可能被复用——需判断是否需要先 dispose 再重新 init
拍快照看 Detached DOM 和引用链
打开 Chrome DevTools → Memory 面板 → 先点 Collect garbage（小垃圾箱图标），再执行以下三连拍：
- Baseline：空闲状态，GC 后拍第一张
- Active：初始化图表并渲染完成，GC 后拍第二张
- Cleanup：调用销毁方法 + 手动触发 GC + 路由跳转或组件卸载后，再 GC 并拍第三张
切换到 Comparison 视图，筛选 Objects allocated between snapshots，重点关注：
- 构造函数名含插件关键词的对象（如 ECharts、Chart、CanvasRenderingContext2D、WebGLRenderingContext）
- 带 (detached) 标记的 DOM 节点（说明图表容器已从页面移除，但 JS 仍强引用）
- 大量增长的 Closure 实例，右键 → Reveal in Summary view，查看右侧 Retaining Tree 是否指向插件内部定时器、事件监听器或全局缓存
补充验证手段
快照只是静态切片，还需动态佐证：
- 在 Performance 面板开启 Memory 复选框，录制多次“打开图表→关闭→再打开”过程，观察 JS Heap 曲线是否只升不降
- 检查插件是否自动绑定全局变量（如 window.echarts、window.Chart）或 document 级事件（如 resize 监听未解绑）
- 若插件支持配置项（如 renderer: 'canvas'），可尝试切换为 svg 对比内存表现——Canvas 上下文泄漏更隐蔽也更难回收
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
