定时器+echarts运行时间太长导致内存溢出页面崩溃
最近做的项目需要在页面上展示echarts图表,且数据每隔10s刷新一次,然后发现时间长了以后chorme浏览器会显示页面崩溃。一开始以为是定时器的原因,试了网上的很多方法,比如把setInterval改成setTimeout,及时清除定时器,设置为null释放内存等,甚至还有在get请求的参数里加上时间戳……发现都没有作用,页面依然崩溃。最后发现是echarts的问题。(内存泄漏可用chorme浏览器的memory排查,具体排查方法可以在网上搜到)
通过init方法创建echarts实例,如果不及时清理就会越来越多,占用大量内存,有两种方法可以避免这种情况:一种是在init之前先判断echarts实例是否存在
var chart
if (chart == undefined) {
chart = echarts.init(document.getElementById(dom));
}
另一种方法是在init之前销毁已经存在的echarts实例,可用clear()和dispose()手动清理变量,区别是clear()不会销毁实例,只是重新绘制图形,而dispose()会销毁实例,需要重新构建ECharts对象
var chart
if (chart) {
echarts.dispose(chart)
chart = echarts.init(document.getElementById(dom))
}
本来以为这样就ok了,过段时间切回来一看又崩溃了,诡异的是停留在当前页面查看内存一直没有涨,切换到其他网页再回来看从一个很高的内存又降到了正常值,相当于你看着它它不涨,不看它的时候一直在涨。。后来才知道chrome浏览器只有打开页面,内存才会释放,那么问题来了,如果我们想长时间查看其他页面,仍在后台运行的echarts页面很可能悄无声息地崩溃了。因此我们需要在切换到其他页面时停止自动刷新,切回来时再开启,那么有没有什么浏览器事件能在切换页面时被触发呢?答案是有的:
浏览器标签页被隐藏或显示的时候会触发visibilitychange事件 (可参考 https://www.jianshu.com/p/e905584f8ed2)
我们可以监听visibilitychange事件,页面隐藏时清除定时任务,页面显示时重新开启定时任务。
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
// 清除定时任务
} else {
// 开启定时任务
}
});
这样就不会发生切换到其他页面后echarts页面崩溃的情况了。
参考文章:
https://blog.csdn.net/wxkongkong/article/details/72726720
定时器+echarts运行时间太长导致内存溢出页面崩溃的更多相关文章
- php查询mysql返回大量数据结果集导致内存溢出的解决方法
web开发中如果遇到php查询mysql返回大量数据导致内存溢出.或者内存不够用的情况那就需要看下MySQL C API的关联,那么究竟是什么导致php查询mysql返回大量数据时内存不够用情况? 答 ...
- WPF循环加载图片导致内存溢出的解决办法
程序场景:一系列的图片,从第一张到最后一张依次加载图片,形成“动画”. 生成BitmapImage的方法有多种: 1. var source=new BitmapImage(new Uri(" ...
- 图片--Android加载图片导致内存溢出(Out of Memory异常)
Android在加载大背景图或者大量图片时,经常导致内存溢出(Out of Memory Error),本文根据我处理这些问题的经历及其它开发者的经验,整理解决方案如下(部分代码及文字出处无法考证) ...
- 添加IFrame导致内存溢出的解决过程(IE浏览器,目前发现了原因,还未解决)
1. 现象 每次动态添加iframe时,iexplore.exe进程占据的内存都会增加(大概10M左右),不会自动释放,最终导致内存溢出 2. 解决过程 经过网络的一番搜索,基本上给出的解决方案是 ...
- POI读写大数据量excel,解决超过几万行而导致内存溢出的问题
1. Excel2003与Excel2007 两个版本的最大行数和列数不同,2003版最大行数是65536行,最大列数是256列,2007版及以后的版本最大行数是1048576行,最大列数是16384 ...
- Android加载图片导致内存溢出(Out of Memory异常)
Android在加载大背景图或者大量图片时,经常导致内存溢出(Out of Memory Error),本文根据我处理这些问题的经历及其它开发者的经验,整理解决方案如下(部分代码及文字出处无法考证) ...
- String的replace导致内存溢出
从一次内存溢出来看JDK的String应该怎么用 背景 JDK在String类中给我们提供的API,replace是个使用频率很高的的方法.因为他可以对字符串内容进行替换,只需要输入替换字符串和被替换 ...
- Restful规则及JPA导致内存溢出
HTTP动词 对于资源的具体操作类型,由HTTP动词表示. 常用的HTTP动词有下面五个(括号里是对应的SQL命令). GET(SELECT):从服务器取出资源(一项或多项). POST(CREATE ...
- Java线程池队列吃的太饱,撑着了咋整?java 队列过大导致内存溢出
Java的Executors框架提供的定长线程池内部默认使用LinkedBlockingQueue作为任务的容器,这个队列是没有限定大小的,可以无限向里面submit任务. 当线程池处理的太慢的时候, ...
随机推荐
- String,StringBuffer,StringBuilder三者的区别
相同点: String,StringBuffer,StringBuilder,都是final类,不允许被继承,在本质上都是字符数组, 不同点: 1.String的长度是不可变的而后两者长度可变,在进行 ...
- 《机器学习_07_03_svm_核函数与非线性支持向量机》
一.简介 前两节分别实现了硬间隔支持向量机与软间隔支持向量机,它们本质上都是线性分类器,只是软间隔对"异常点"更加宽容,它们对形如如下的螺旋数据都没法进行良好分类,因为没法找到一个 ...
- Java Web之路一:过滤器(Filter)
一.过滤器(Filter)简介 过滤器是对web资源进行拦截,做一些处理后再交给下一个过滤器或Servlet处理,主要可以拦截request和response 过滤器是以一种组件的形式与web程序绑定 ...
- PAT-1058 A+B in Hogwarts (进制转换)
1058. A+B in Hogwarts If you are a fan of Harry Potter, you would know the world of magic has its ow ...
- DP+容斥 BZOJ1042
1042: [HAOI2008]硬币购物 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2558 Solved: 1539[Submit][Stat ...
- 15-2 insert语句介绍
create table TblClass ( tClassId ,) primary key, tClassName ) ) --向班级表中插入一条记录 --insert into 表名(列1,列2 ...
- swiper基本使用
参数名 类型 是否必填 描述 swiperContainer HTMLElement or string 必选 Swiper容器的css选择器,例如".swiper-container&qu ...
- npm audit fix 报错
found 2504 vulnerabilities (1360 low, 1109 moderate, 29 high, 6 critical) run `npm audit fix` to fi ...
- 永久关闭windows更新步骤
在搜索“web和windows”框中输入“服务” 在搜索结果中点击第一个,那个图标像齿轮的那个!如下图. 在打开的“服务”窗口中,我们找到windows update 找到”windows upd ...
- python的生成器和迭代器
三.推倒式从时间上比较:集合 字典 元祖 列表 (从小到大)占用内存比较:字典 集合 列表 元祖 (从大到小) 字典是可进行hash操作,操作的是字典的key ,而对list进行hash操作的时候操作 ...