最近使用vue + Echarts 实现vue项目的数据可视化功能的时候,在ios环境下,点击列表页进入详情页几次就白屏了。
感觉白屏的原因是:echarts频繁初始化画图时候有内存泄漏,吃掉了所有内存,就白屏画不出来了。

然后就在chrome测试:

 
 

点击过程中一直增加,点击停止后,没有回落到平衡状态。

原因:
生成的echarts实例对象很大,占用内存过多。
echarts 里 zrender 用的canvas。

 
 

查找过程中发现:
1.不要把chart实例赋值在this上。(this对象一直存在不会被回收)
2.新版本echarts不支持对一个dom多次创建实例。
3.析构掉生成的echarts对象。

解决方法:

 //-dom 不存在时不画
if (!this.$refs.barchart) {
return
}
//- 不要重复初始化
let Chart = echarts.getInstanceByDom(this.$refs.barchart)
if (!Chart) {
Chart = echarts.init(this.$refs.barchart, 'light')
}
//-释放echarts对象
beforeDestroy () {
let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
if (dcharts) {
echarts.dispose(dcharts)
}
}, //- 发现官网实例上有once hook 比destroy 要好一些
//- hook:beforeDestroy
let Chart = echarts.getInstanceByDom(this.$refs.barchart)
if (!Chart) {
Chart = echarts.init(this.$refs.barchart, 'light')
this.$once('hook:beforeDestroy', function () {
echarts.dispose(Chart)
})
}

echarts 内存泄漏的更多相关文章

  1. 关于ECharts内存泄漏问题

    最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时,也遇到 ...

  2. echarts配合循环计时器等出现的内存泄漏

    echarts是百度的一个图表插件,确实好用美观. 之前实习接触到的页面大多是下面这种调用方式 var chart=echarts.init(document.getElementById(dom)) ...

  3. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下? SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  4. 【知识必备】内存泄漏全解析,从此拒绝ANR,让OOM远离你的身边,跟内存泄漏say byebye

    一.写在前面 对于C++来说,内存泄漏就是new出来的对象没有delete,俗称野指针:而对于java来说,就是new出来的Object放在Heap上无法被GC回收:而这里就把我之前的一篇内存泄漏的总 ...

  5. Android性能优化之利用Rxlifecycle解决RxJava内存泄漏

    前言: 其实RxJava引起的内存泄漏是我无意中发现了,本来是想了解Retrofit与RxJava相结合中是如何通过适配器模式解决的,结果却发现了RxJava是会引起内存泄漏的,所有想着查找一下资料学 ...

  6. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  7. C++的内存泄漏检测

    C++大量的手动分配.回收内存是存在风险的,也许一个函数中一小块内存泄漏被重复放大之后,最后掏空内存. 这里介绍一种在debug模式下测试内存泄漏的方法. 首先在文件的开头以确定的顺序写下这段代码: ...

  8. 使用 Android Studio 检测内存泄漏与解决内存泄漏问题

    本文在腾讯技术推文上 修改 发布. http://wetest.qq.com/lab/view/63.html?from=ads_test2_qqtips&sessionUserType=BF ...

  9. 【腾讯优测干货分享】Android内存泄漏的简单检查与分析方法

    本文来自于Dev Club 开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/57d14047603a5bf1242ad01b 导语 内存泄漏问题大约是An ...

随机推荐

  1. 【SpringBoot】SpringBoot/MyBatis/MySql/thymeleaf/Log4j整合工程

    工程下载地址:https://files.cnblogs.com/files/xiandedanteng/MMSpringWeb20191027-1.rar 工程目录结构如图: 1.创建工程 有些网文 ...

  2. Swift 字符(Character)

    Swift 的字符是一个单一的字符字符串字面量,数据类型为 Character. import Cocoa let char1: Character = "A" let char2 ...

  3. 使用druid连接池带来的坑testOnBorrow=false

    首先说一下自己程序中遇到的问题,前一段时间新写了一个项目,主要架构改进,为前端提供接口(spring +springmvc+mybatis) 在新项目中使用的是阿里的druid连接池,配置简单,除了数 ...

  4. powershell命令教程

    启动 powershell #字符串操作 对象操作 "hello".Length #进程操作 PS C:\> notepad PS C:\> $process=get- ...

  5. vector swap

    #include <iostream>#include <vector>#include <list>#include <deque> using na ...

  6. logstash输出至elasticsearch

    续上一篇 上一篇描述了通过logback配置用logstash收集springmvc项目日志,本文是描述如何进一步通过elasticsearch对所收集数据进行的分析. output { elasti ...

  7. Java文章翻译

    一.基础 1.String 使用" "还是构造函数创建字符串? 画图说明字符串的不变性 在Java中字符串为什么是不可变的 Java中的字符串是按引用传递? 排名前十的Java字符 ...

  8. 最新 易车java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.易车等10家互联网公司的校招Offer,因为某些自身原因最终选择了易车.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. list集合的一些小见解

    关于LIst集合 前言: 第一次写博客,有些东西可能总结的到位,发表一下自己的一些观点,欢迎大佬们点评和指教 正文: list集合可以分为ArrayLlst和LinkedList. ArrayList ...

  10. 【leetcode算法-简单】1.两数之和

    [题目描述] 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个 ...