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官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到 ...
随机推荐
- Milo的游戏开发的一些链接资料
http://www.cnblogs.com/miloyip/default.aspx?page=1 http://www.cnblogs.com/miloyip/archive/2010/06/14 ...
- J2EE
随笔分类 - J2EE 关于SpringMVC Json使用 摘要: 很简单的一个东西,这里就不做过多介绍了,写一个小Demo,随手记录下.首先,在搭好SpringMVC工程环境之后,如果想用Sp ...
- android:由URL载入中ImageView
两种方法: 方法一: Bitmap bimage= getBitmapFromURL(bannerpath); image.setImageBitmap(bimage); public static ...
- Asp.net Identity 系列之 怎样修改Microsoft.AspNet.Identity.EntityFramework.IdentityUser 的 Id 字段的数据类型
这篇博客我们来学习如何将AspNetUsers 表的Id 字段 的类型由nvarchar(128) 改为Int 并且子增长 1.为什么要修改 如果你运行过 Asp.net mvc 示例项目,你好会发现 ...
- 【转】Android实现推送方式解决方案
本文介绍在Android中实现推送方式的基础知识及相关解决方案.推送功能在手机开发中应用的场景是越来起来了,不说别的,就我们手机上的新闻客户端就时不j时的推送过来新的消息,很方便的阅读最新的新闻信息. ...
- ASP.NET MVC + EF 利用存储过程读取大数据
ASP.NET MVC + EF 利用存储过程读取大数据,1亿数据测试很OK 看到本文的标题,相信你会忍不住进来看看! 没错,本文要讲的就是这个重量级的东西,这个不仅仅支持单表查询,更能支持连接查询, ...
- 后台XML处理
public void GetInfo() { string message = @"<?xml version='1.0' encoding='utf-8' ...
- iOS基础 - 内存分析
一.内存的重要性 程序是否可用的最根本的制约因素. 十分影响用户体验. 程序的crash有很多情况都是内存的原因. 二.iOS平台内存警告机制 iOS系统不支持虚拟内存,一旦出现内存不足的情况,iOS ...
- 玩转python之字符串逐个字符或逐词反转
众所周知,python中的字符串是无法改变的,反转一个字符串自然要创建一个拷贝:最简单的方法,当然是步长为“-1”的切片: result = astring[::-1] 如果要是按单词来反转,需要三步 ...
- C++中内存泄露的检测
C++没有java的内存垃圾回收机制,在程序短的时候可能比较容易发现问题,在程序长的时候是否有什么检测的方法呢? 假设有一个函数可以某点检测程序的内存使用情况,那是否可以在程序开始的时候设置一个点,在 ...