定时器+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://www.cnblogs.com/zdd2017/p/11777822.html

定时器+echarts运行时间太长导致内存溢出页面崩溃相关推荐

接口数据量太大，导致内存溢出，解决办法
通常我们使用接口调用数据总是返回一段我们需要的信息,或者是json 格式信息,通过接收将数据保存到程序当中,再对接收到的数据进行转换成对应的模型格式 .目前遇到的问题是接收的数据量过于巨大,导致完整接 ...
php查询mysql返回大量数据结果集导致内存溢出的解决方法
web开发中如果遇到php查询mysql返回大量数据导致内存溢出.或者内存不够用的情况那就需要看下MySQL C API的关联,那么究竟是什么导致php查询mysql返回大量数据时内存不够用情况? 答 ...
android 内存溢出检查,Android Handler使用导致内存溢出附带LeakCanary排查
最近项目马上结束了在对项目进行检查有没有内存泄漏的地方,这里使用的是leakcanary. 使用步骤很简单: 添加依赖: dependencies { debugCompile 'com.square ...
添加IFrame导致内存溢出的解决过程（IE浏览器，目前发现了原因，还未解决）...
1. 现象每次动态添加iframe时,iexplore.exe进程占据的内存都会增加(大概10M左右),不会自动释放,最终导致内存溢出 2. 解决过程经过网络的一番搜索,基本上给出的解决方案是 ...
本地项目antd 修改.less文件导致内存溢出
项目场景: antd 项目,修改less文件会导致内存溢出问题描述本地环境antd 项目,修改less文件会导致内存溢出:如下 FATAL ERROR: Reached heap limit Al ...
递归要素及太深导致堆栈溢出怎么办？
递归概念理解:递归实质还是函数的嵌套调用,只不过调用的函数凑巧还是它自己而已. 递归要素:(1)递推公式(2)终止条件递归太深导致堆栈溢出怎么办? 2个手段: 1.限制递归深度,设置一个阈值,超过就 ...
Vivado工程路径太长导致不能生成bit文件
1.1 Vivado工程路径太长导致不能生成bit文件 1.1.1 本节目录 1)本节目录: 2)本节引言: 3)FPGA简介: 4)Vivado工程路径太长导致不能生成bit文件: 5)结束语. 1 ...
图片--Android加载图片导致内存溢出（Out of Memory异常）
Android在加载大背景图或者大量图片时,经常导致内存溢出(Out of Memory Error),本文根据我处理这些问题的经历及其它开发者的经验,整理解决方案如下(部分代码及文字出处无法考证) ...
Android加载图片导致内存溢出（Out of Memory异常）
Android在加载大背景图或者大量图片时,经常导致内存溢出(Out of Memory Error),本文根据我处理这些问题的经历及其它开发者的经验,整理解决方案如下(部分代码及文字出处无法考证) ...
POI读写超大数据量Excel，解决超过几万行而导致内存溢出的问题（附源码）
来源:cnblogs.com/swordfall/p/8298386.html 1. Excel2003与Excel2007 两个版本的最大行数和列数不同,2003版最大行数是65536行,最大列数是 ...

定时器+echarts运行时间太长导致内存溢出页面崩溃

定时器+echarts运行时间太长导致内存溢出页面崩溃

定时器+echarts运行时间太长导致内存溢出页面崩溃相关推荐

最新文章

热门文章