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官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到 ...
随机推荐
- 生产环境使用Nginx+uwsgi部署Django
在本地运行django应用相对来说还是挺方便的,使用自带的runserver启动即可.如果在生产环境部署django,就要多考虑一些问题了.比如静态文件处理,安全,效率等等 在网上找到了不错的部署的教 ...
- proguard android迷茫
我们收拾它意味着蛊惑项目即将结束.上线.但是,当这个问题就更烦躁人,我也记录因混乱中遇到的问题 首先,我在装android4.0封装版本,有没有在这个文件查看器项目 假设有,请继续点击进入projec ...
- orcale复制表结构及其数据
http://hi.baidu.com/tag/Oracle/feeds http://hi.baidu.com/gqftuisidibabiq/item/14d306cc87cbdf45bcef69 ...
- Visual Studio 使用调试技巧
Visual Studio 使用调试技巧 这篇文章来源于http://damieng.com/blog/2014/02/05/8-visual-studio-debugging-tips-debug- ...
- .NET MVC4 实训记录之三(EntityFramework 与枚举)
EntityFramework对枚举的引入是从版本5开始的(如果没有记错的话).枚举可以很大程度上提高对程序的可读性.那么在EntityFramework的CodeFirst模式下,如何使用枚举呢?答 ...
- DDD(领域驱动设计)应对具体业务场景,Domain Model(领域模型)到底如何设计?
DDD(领域驱动设计)应对具体业务场景,Domain Model(领域模型)到底如何设计? 写在前面 阅读目录: 迷雾森林 找回自我 开源地址 后记 毫无疑问,领域驱动设计的核心是领域模型,领域模型的 ...
- parent和top
function show(){ //parent是获取本窗口的父窗口 //window.parent.location.href="http://www.baidu.com" ...
- 如何在网页启动Windows服务
由于公司有许多windows服务进行业务的处理,所以对服务的维护也是一个比较头痛的问题,因为自己也不知道服务什么时候自动停了,而且更主要的原因是服务都是由运维部门在维护管理,开发这边没有直接操作服务的 ...
- Redis一些命令总结
链接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsave:返回上次成功将 ...
- 计算image 积分图
// testopencv.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <opencv2\opencv.hpp& ...