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