vue2+ echarts 运行时间太长导致内存溢出

• 使用定时器setInterval 每个15秒请求后端数据，渲染页面，但是时间一长的时候，chorme浏览器发生奔溃，原因是内存的溢出。

解决方式1

• 就是在重新init的时候，销毁之前的echarts实例，可用clear()和dispose()手动清理变量，区别是clear()不会销毁实例，只是重新绘制图形，而dispose()会销毁实例，需要重新构建ECharts对象

var chart
if (chart) {
    echarts.clear(chart)
    chart = echarts.init(document.getElementById(dom))
}

切换tab隐藏显示时，chrome浏览器又一直叠加内存，因此需要监听浏览器标签页的显示和隐藏事件

• 监听visibilitychange事件，页面隐藏时清除定时任务，页面显示时重新开启定时任务

document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
        // 清除定时任务
    } else {
        // 开启定时任务    }
});

标签： 内存溢出