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

主要问题出现在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、组织好你的逻辑,避免死循环等造成浏览器卡顿,崩溃的问题。

猜你喜欢

转载自blog.csdn.net/qq_27751965/article/details/103024972