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

发布时间：2019-10-12 11:19:53 修改时间：2019-10-12 11:24:02 阅读：6569 评论：0 0

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

---