必须显式调用 destroy() 方法，否则图表实例残留导致内存泄漏；需检查插件钩子、动画、事件监听器、canvas 引用及外部数据闭包，并用 devtools 验证销毁效果。
复杂图表库（如 Chart.js）在频繁创建和销毁时，若不规范操作，极易引发内存泄漏。核心问题不在图表渲染本身，而在实例、事件、Canvas 资源与插件钩子的残留。关键不是“等 GC 自动回收”，而是主动切断所有强引用链。
必须显式调用 destroy() 方法
Chart.js 不会自动销毁——即使 DOM 元素被移除，图表实例仍驻留在内存中，并持续持有 Canvas 上下文、动画帧、数据集元数据和插件状态。
- 销毁前确保图表实例存在且未被重复销毁：if (chart && typeof chart.destroy === 'function') chart.destroy();
- destroy() 内部会触发插件的 beforeDestroy 钩子、停止所有动画、清空数据集缓存、移除内部 resize 监听器、释放 Canvas 2D context 引用
- 切勿仅靠
chart = null或移除 canvas 元素代替 destroy()；这只会让实例变成“游离对象”，无法释放底层资源
手动清理自定义事件监听器
Chart.js 管理自身事件（如窗口 resize），但你添加的交互监听器（如点击、悬停）不会被自动清除。
- 绑定时保存 handler 引用：
const handleClick = (e) => { /* ... */ }; - 在销毁前解绑：
chart.canvas.removeEventListener('click', handleClick); - 若使用事件委托或动态绑定，需同步维护监听器映射表，避免漏删
警惕数据引用与闭包陷阱
图表配置中的 data、options 或 plugins 若引用了外部大对象（如原始 API 响应、全局缓存、DOM 节点），这些引用会在 chart 实例存活期间阻止 GC 回收。
- 避免在配置中直接传入未剪裁的原始数据对象；建议 shallow clone 或提取必要字段
- 插件中慎用闭包捕获大型作用域变量；销毁后手动置空插件内部缓存：
plugin.cache = null; - 若使用
chart.data.datasets动态更新，旧 dataset 的 metadata（如_meta）可能残留；destroy() 可清理，但反复 update 不 destroy 会累积
验证销毁是否彻底
仅靠逻辑判断不够，需借助 Chrome DevTools 的 Memory 面板实证：
- 录制 Heap Snapshot，筛选
Chart构造函数实例，确认销毁后数量归零 - 使用 Allocation instrumentation on timeline 捕获创建/销毁过程，观察是否有未释放的 CanvasRenderingContext2D 或 Path2D 对象
- 检查是否存在 detached HTMLCanvasElement 节点——说明 canvas 元素已从 DOM 移除，但 chart 实例仍在引用它
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
