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官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到 ...
随机推荐
- LeetCode——Longest Palindromic Substring
Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...
- 框架Asp.net Identity
框架Asp.net Identity 在Asp.net上,微软的membershop框架经历了Asp.net membership到Asp.net simple membership,再到现在的Asp ...
- 分区表在安装系统(MBR)丢失或损坏
操作系统能识别出硬盘中的各个不同的分区,是靠硬盘分区表(MBR)来识别的. 硬盘分区表中记录了各个分区的位置和大小以及类型等信息,假设这个分区表破坏了,那么这块硬盘里面的分区就会丢失.系统是无法在浏览 ...
- MongoDB的C#驱动
MongoDB的C#驱动基本使用 MongoDB的官方C#驱动可以通过这个链接得到.链接提供了.msi和.zip两种方式获取驱动dll文件. 通过这篇文章来介绍C#驱动的基本数据库连接,增删改查操作. ...
- 关于ligerform中select与text的赋值与取值
如有下ligerform表单: var formData = [ { display: "区域", name: "QYYJ", newline: true, l ...
- 我的Android 4 学习系列之使用 Internet 资源
目录 连接Internet资源 分析XML资源 使用Download Manager下载文件 查询Download manager 使用Account Manager 对 Google App Eng ...
- 无线连接手机进行Android测试
当每天走到哪都要拿一根数据线进行项目测试的时候,总是有一些焦急和烦躁的,如果能够无线连接测试就在好不过了. 这样不再是什么难事了,只需要几步走: 在进行无线连接测试的过程中,你的手机必须root了,这 ...
- SpringMVC格式化显示
SpringMVC学习系列(7) 之 格式化显示 在系列(6)中我们介绍了如何验证提交的数据的正确性,当数据验证通过后就会被我们保存起来.保存的数据会用于以后的展示,这才是保存的价值.那么在展示的时候 ...
- xquery
XQuery 相对于 XML,等同于 SQL 相对于数据库.设计用来查询 XML 数据.- 不仅仅限于 XML 文件,还包括任何可以 XML 形态呈现的数据,包括数据库. FLWOR 是 " ...
- 增删查改-MySQL
查询: 在MySQL中,select的基本语法形式: select 属性列表 from 表名和视图 [where 条件表达式] [group by 属性名 [having 条件表达式]] [order ...