背景:Vue+Echarts+mintUI开发移动端app
问题:Echarts图表在IOS端懒加载多个时出现闪退
问题分析:
频繁操作App直到闪退出现,监控内存使用情况后发现,在操作过程中内存一直升高,到600M时软件闪退;
考虑从两方面解决:
一,减轻echarts图表渲染的压力(只渲染视口内的图表);
二,抑制频繁请求,减轻内存压力(抑制无效请求);
一,减轻echarts图表渲染的压力:
处理步骤1:
因为同一个组件做了复用,通过点击事件改变params来区分A组图表和B组图表。一开始推测是切换AB组时数据未清空导致的,所以点击事件时给数据做了重置清空动作(this.list=[];)。这样处理之后,进行测试,结果发现内存在起伏中上涨,最终还是会达到600M而崩溃;
处理步骤2:
到这里考虑是否在某个时机(改变AB组图表时或者什么时候)销毁组件,但是vue的.$destory只能销毁一个实例:清理它与其他实例的链接,解绑它的全部指定以及事件监听,并不会销毁/影响DOM展现。DOM展现还在,就表示前面展现过的图表都还在内存中占用空间。
所以办法就是用v-if强制移除DOM。想到就去尝试,思路是:
给eCharts组件加v-if=“isShow”,isShow通过touch事件触发scrollTop的值变更来决定是否显示;步骤三展开讲具体实现。
处理步骤3:
先说明一下变量/常量
(1)mainPage元素&#x