### [甘特图反复刷新：为什么内存只涨不降](https://www.huociguo.com/article/1632)

**Published:** 2026-10-02T04:05:59

**Author:** 米了

**Excerpt:** 数据每次更新就重新调用图表构造函数，页面内存持续上涨，切换几轮后开始卡顿。根因是旧实例没有被释放，新实例又叠加…

数据每次更新就重新调用图表构造函数，页面内存持续上涨，切换几轮后开始卡顿。根因是旧实例没有被释放，新实例又叠加在同一容器上。

![笔记本屏幕上显示的多个图表](https://api.huociguo.com/wp-content/uploads/2026/10/e2.jpg)

实例叠加会让内存曲线只升不落

## 问题写法

```
function render(data) {
  const chart = anychart.ganttResource();
  chart.data(data);
  chart.container('box').draw();
}
```

每次调用都新建一个图表对象并绑定容器。旧对象仍持有节点引用与事件监听，垃圾回收无法回收，容器里也会残留多份画布。

## 正确写法

```
let chart = null;
function render(data) {
  if (!chart) {
    chart = anychart.ganttResource();
    chart.container('box').draw();
  }
  chart.data(data);
  chart.fitAll();
}
```

实例只创建一次，后续刷新走数据接口。fitAll 负责按新数据重算视窗，避免时间轴停留在旧范围。

## 两条补充

-   容器被整体替换时才需要重建，此时先调用实例自带的销毁方法，再清空容器节点。
-   定时刷新场景下，上一次绘制未完成时不要发起下一次，用状态位排队。

## 如何确认泄漏

1.  在性能面板录制内存，连续刷新若干轮后观察曲线是否回落。
2.  查看容器里画布节点的数量，持续增长即为实例叠加。
3.  用堆快照对比前后对象数，筛选图表名下的实例。

## 取舍

| 方案  | 内存表现 | 适用  |
| --- | --- | --- |
| 复用实例 | 平稳  | 常规刷新 |
| 销毁后重建 | 取决于销毁是否彻底 | 容器结构变化 |
| 每次新建 | 持续增长 | 不使用 |

**Tags:** 内存泄漏, 图表复用, 图表实例, 数据刷新, 甘特图

**Categories:** HTML5

---