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