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图表,还有其他元素。
echarts配合循环计时器等出现的内存泄漏的更多相关文章
- .net 循环引用是否会造成内存泄漏
一直想做这么一个测试,人和手的测试.类型"人"有一个属性"手",需要"手"也可以读取"人"的数据.则"手&qu ...
- 【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免(转)
这是我在公众号(高级前端进阶)看到的文章,现在做笔记 https://mp.weixin.qq.com/s/RZ8Lpkyk8lz6z5H8Q8SiEQ 垃圾回收算法 常用垃圾回收算法叫做**标记清除 ...
- JavaScript的闭包和内存泄漏问题
闭包 http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html JavaScript中必须提到的功能最强大的抽象 ...
- JavaScript 中的内存泄漏
JavaScript 中的内存泄漏 JavaScript 是一种垃圾收集式语言,这就是说,内存是根据对象的创建分配给该对象的,并会在没有对该对象的引用时由浏览器收回.JavaScript 的垃圾收集机 ...
- <转>Python的内存泄漏及gc模块的使用分析
一般来说在 Python 中,为了解决内存泄漏问题,采用了对象引用计数,并基于引用计数实现自动垃圾回收.由于Python 有了自动垃圾回收功能,就造成了不少初学者误认为自己从此过上了好日子,不必再受内 ...
- 写出js内存泄漏的问题?
回答一: (1)IE7/8 DOM对象或者Active对象循环引用导致内存泄漏 a.多个对象循环引用 b.循环的DOM泄漏 (2)基础的DOM泄漏 当原有的DOM被移除时,子节点引用没有被移除则无法回 ...
- Javascript中的内存泄漏
最新博客站点:欢迎来访 一.内存泄漏 由于某些原因不再需要的内存没有被操作系统或则空闲内存池回收.编程语言中有多种管理内存的方式.这些方式从不同程度上会减少内存泄漏的几率,高级语言嵌入了 ...
- js内存泄漏的问题?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在. 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量.如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环 ...
- 关于ECharts内存泄漏问题
最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到 ...
随机推荐
- SQL点滴35—SQL语句中的exists
原文:SQL点滴35-SQL语句中的exists 比如在Northwind数据库中有一个查询为 SELECT c.CustomerId,CompanyName FROM Customers c WHE ...
- js 实现自动换行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 定制openwrt的根文件
都在package文件夹之中 1 ssh登陆欢迎文字,在package/base-files/files/etc/banner中 2 路由器的默认机器名字,在package/base-files/fi ...
- IE低版本下实现html5的placeholder(表单提示)功能
placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...
- JavaScript语言基础知识8
这篇文章是对前面学习的知识进行总结: 1.JavaScript支持多种数据类型,如数值类型.字符串类型.布尔类型等. 2.在JavaScript中,字符串是用引號括起来的字符系列,转义字符能够用来表示 ...
- fullCalendar:中文API
1.与google日历连接,别忘记加入<script type='text/javascript' src='js/gcal.js'/> events: $.fullCalendar.gc ...
- mysql基础之基本数据类型
原文:mysql基础之基本数据类型 列类型学习 mysql三大列类型 整型 Tinyint/ smallint/ mediumint/int/ bigint(M) unsigned zerofill ...
- Hibernate在自由状态和持久的状态转变
在Hibernate在.一PO术后可能长时间,session过时关闭.此时PO它一直是游离状态的对象,在这种状态下,以被转换成持久战,有几种方法如下: 1.session.saveOrUpdate(o ...
- 在Ubuntu上安装 nginx, MySQL, PHP (LEMP),phpmyadmin和WordPress
0)更新 Apt-Get 终端命令:sudo apt-get update 1) 安装php sudo apt-get install php5 2)安装MySql 终端命令: sudo apt-ge ...
- Git的使用学习资源
开学第一天一般都挺认真的,认真做个功课. 跟据Ryan Tang的推荐,有两个比较好的学习Git的网站:http://git.gitcafe.com/book/zh 还有一个是CodeSchool的一 ...