echarts和setInerval内存泄漏问题分析解决

  • Post author:
  • Post category:其他


主要问题出现在setInterval的定时器触发导致,此方法与setTimeout方法触发并无关系,主要出现在定时器触发的方法内部因素导致。


为什么每次循环内存增加导致浏览器内存溢出进而浏览器卡死,在不用echarts的情况下内存有增加的情况不明显,并且一半没有,导致这种原因的因素

主要

有两种:

1、console打印类 每次打印的数据相对较多的情况下会逐渐增加内存,这种情况一搬不会发生(在项目正常上线的情况下是需要清除冗余代码例如console这种测试代码)

2、插件导致(这里指echarts类),echarts的init方法 每次执行会增加一次内存,并且不会自动释放。



主要解决方案



1、

清除console

2、在静态加载echarts 避免二次init


针对避免echarts二次init导致内存增长有两种情况

1、

在dom节点不刷新

的情况下进行数据更新使用定时器(setInterval或者setTimeout):

方法一:判断echarts对象是否存在


var chart = echarts.getInstanceByDom(document.getElementById(dom));


if (chart === undefined)


{


chart = echarts.init(document.getElementById(dom));


}


var option = {  //.......................}


chart.setOption(option);

方法二:每次销毁之前对象




var chart = echarts.getInstanceByDom(document.getElementById(dom));


echarts.dispose(chart);


chart = echarts.init(document.getElementById(dom));


var option = {  //.......................}


chart.setOption(option);

2、在

dom节点重构

的情况下init刷新数据(此情况需要避免二次init需要判断一下dom节点更新的条件 跳过init来防止,此后参见第一种方法,兼并清除每次数据之后再进行set方法)



总结:

1、减少不必要的全局变量,使用严格模式避免意外创建全局变量。

2、在你使用完数据后,及时解除引用(闭包中的变量,dom引用,定时器清除)。

3、组织好你的逻辑,避免死循环等造成浏览器卡顿,崩溃的问题。



版权声明:本文为qq_27751965原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。