echarts配合循环计时器等出现的内存泄漏

　　echarts是百度的一个图表插件，确实好用美观。

　　之前实习接触到的页面大多是下面这种调用方式

var chart=echarts.init(document.getElementById(dom));
var option={//.....................
}
chart.setOption(option);

　　这次有一个页面需要计时器反复加载新数据，然后重绘echarts图表。一开始我还是使用了上面这种方式，没有发现太大问题。第二天早上来调试的时候，网页运行了一段时间，我的电脑内存达到了56%，我是8G的内存，十分好奇，发现chome占用了大量的内存，调出chome的任务管理器，发现就是带有计时器的页面内存占用一直再稳定上升。。。我意识到了内存泄漏，一直认为内存泄漏与我无缘的我内心是奔溃的。

　　为了确认，我把计时器改成了200ms，果然，一会内存就上涨到1G了，赶紧上网查资料，发现chome自带内存快照，拍了几张快照对比，发现原来是echarts的问题。搜了挺久，似乎也没比较好的方案，有一个说调用dispose()(这个应该也是可以的，但没有过多的尝试)，试了一下，好像调用方法有错，我就去官网查了一下文档。

　　看到这里我突然就想到，百度建议的是修改配置，我也确实是使用setOption()去修改的，但是我没注意到，当第二次进入时我们是用

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

这段代码重新初始化了一个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);

大家可以试试。

补：后来我用两种方式试了一下，第一种方式（if.....）内存占用大概在100M左右，第二种方式(echarts.dispose())内存占用大概是300M左右，原因还不太清楚，页面上有6个echarts图表，还有其他元素。

转载于:https://www.cnblogs.com/TIEDPAG/p/6272911.html

echarts配合循环计时器等出现的内存泄漏相关推荐

iOS循环引用问题集合、内存泄漏、僵尸对象、代码静态分析
内存泄漏:https://my.oschina.net/llfk/blog/1031291 内存泄漏监测自动化:http://www.cocoachina.com/articles/18490 fac ...
什么是javascript内存泄漏？以及解决方法
什么是javascript内存泄漏?以及解决方法一.什么是javascript内存泄漏? 二.常见的内存泄漏 1.意外的全局变量(通常是变量未被定义或者胡乱引用了全局变量) 2.计时器 3.闭包 4 ...
python的gc模块_Python的内存泄漏及gc模块的使用分析
一般来说在Python 中,为了解决内存泄漏问题,采用了对象引用计数,并基于引用计数实现自动垃圾回收.由于Python 有了自动垃圾回收功能,就造成了不少初学者误认为自己从此过上了好日子,不必再受内存 ...
iOS开发之内存泄漏检测工具-Leaks
引言我们在实际开发过程中,经常会不小心造成循环引用问题,从而造成内存泄漏问题,那么我们该如何检测我们工程那个位置存在内存泄漏问题呢?这就需要用到Xcode自带的内存泄漏检测工具-Leaks. 内存泄 ...
浏览器的内存泄漏（memory leak）问题
1 什么是内存泄漏? 内存泄漏是指内存资源得不到释放 && 失去对该内存区的指针 => 无法复用内存资源,最终导致内存溢出. 2 JS中可以操作的对象有哪些? Script中我们 ...
nstimer循环引用_解决NSTimer循环引用导致内存泄漏的六种方法
demo放在了GitHub 内存泄漏的原因: self强引用timer.timer添加在runloop上,只要timer不销毁self就销毁不了.当然了你可以选择在viewWillDisappear中 ...
常规循环引用内存泄漏和Closure内存泄漏
常规循环引用内存泄漏和Closure内存泄漏要了解javascript的内存泄漏问题,首先要了解的就是javascript的GC原理. 我记得原来在犀牛书<JavaScript: The De ...
break后面的语句还执行吗_12.python之配合循环的四种语句
上节课讲了配合循环语句使用的布尔值和布尔运算,为了能够更好地使用循环语句,本节课会讲述四种能够配合循环语句使用的语句,分别是break语句.continue语句.pass语句.else语句. 一.br ...
SetInterval（循环计时器）
SetInterval(循环计时器) 循环计时器(间隔计时器)setInterval() 参数2个第1个参数: 函数/字符串第2个参数: 时间间隔(单位ms) 省略时是10ms,小于10,也是10ms ...
定时轮播Echarts造成内存泄漏致使浏览器崩溃问题
提示:定时轮播Echarts造成内存泄漏致使浏览器崩溃问题文章目录前言一.原因二.解决办法三.辅助工具前言一.原因 1.echarts图未彻底删除: 2.setTimeout和setIn ...

echarts配合循环计时器等出现的内存泄漏

echarts配合循环计时器等出现的内存泄漏相关推荐

最新文章

热门文章