最近使用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. cnpm与npm指定有什么区别?

    CNPM跟NPM用法完全一致,只是在执行命令时将故宫改为CNPM. 因为故宫安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果故宫的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事来自 ...

  2. oracle-密码

    Oracle 11g 默认用户名和密码安装ORACLE时,若没有为下列用户重设密码,则其默认密码如下: 用户名/密码 登录身份 说明sys/change_on_install SYSDBA 或 SYS ...

  3. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_10.RabbitMQ研究-工作模式-路由工作模式介绍

    队列在绑定交换机的时候可以指定routingKey, 路由模式: 1.每个消费者监听自己的队列,并且设置routingkey. 2.生产者将消息发给交换机,由交换机根据routingkey来转发消息到 ...

  4. ios -转载-真机提示 iPhone has denied the launch request 问题

    环境: 手机版本12.1,Xcode10.0问题: 真机时提示 iPhone has denied the launch request ,试过了的各种方法,最终解决方法如下:1. 2. 3.清理Xc ...

  5. 图解 HTTP 笔记(六)——HTTP 首部

    本章主要讲解了 HTTP 首部的结构,已经首部中各字段的用法. 一.HTTP 报文首部 上图是 HTTP 请求报文的结构. HTTP 请求报文由方法.URI.HTTP 版本.HTTP 首部字段等组成. ...

  6. Shell脚本执行的四种方法

    (1).bash(或sh) [脚本的相对路径或绝对路径] [xf@xuexi ~]$ cat a.sh #!/bin/bash echo "hello world!" [xf@xu ...

  7. JavaScript 模块化

    当项目越来越大时,会遇到一些问题: 1.命名冲突 2.文件依赖 所有就有了javascript模块化开发概念. 模块化开发的演变: 1.函数块:最开始用全局函数将代码块包括在函数体内,然后把很多函数写 ...

  8. hadoop异常: java.io.EOFException: Unexpected end of input stream

    执行hadoop任务时报错: -- ::, INFO [main] org.apache.hadoop.mapred.MapTask: Processing --//app1@flume23_1000 ...

  9. C#创建windows服务(二:创建和卸载windows服务)

    引用地址: https://docs.microsoft.com/zh-cn/dotnet/framework/windows-services/how-to-create-windows-servi ...

  10. Spring Boot项目中MyBatis连接DB2和MySQL数据库返回结果中一些字符消失——debug笔记

    写这篇记录的原因是因为我之前在Spring Boot项目中通过MyBatis连接DB2返回的结果中存在一些字段, 这些字段的元素中缺少了一些符号,所以我现在通过在自己的电脑上通过MyBatis连接DB ...