【前端开发】记一次Echart 内存泄露问题的排查

最近发现一个web项目总是莫名其妙的内存增长,然后进行定位后来发现问题大概率出在Eharts上。

于是乎就开始搜索关于echarts内存增长的一些例子,但是都没有结果。

其中翻博客时发现甚至有人换成一维数组就问题就解决了,当然这个试过之后对我来说解决不了问题。

image

(这样能解决掉也真是离了个大谱啊,可有时候问题就是那么的不一样。。)

然后只能去看看issues了,这一看发现早在7年之前就有人提过这类问题,每隔一段时间都有人再单独提问,甚至在上周还有人提问,但是所有相关的issues看样子都不了了之了。

image

这之后这些帖子下甚至每年都还有人吐槽
image
image

各种吐槽 然后我看到了这个帖子
image

就去检查了下官方的例子,确实也有内存增长,然后就单独开了issue反映,想着终于能解决了,然后是等待回复进行沟通。

在沟通时发现问题也不是很简单,因为这个增长的数据在多浏览器下表现不一样,甚至还一直怀疑是vue的问题,同时还发现虽然官方例子也有增长,但是现象不同。

于是就一点点的试和排查,最后定位到了问题。

symbol开启会导致 在setoption内存释放不掉

就是点绘制的问题,而关键就是默认点绘制是开启的。

最终该问题的echarts的开发者修复也已经提上来了,应该会在下个版本(5.5.2)解决。

image

希望同样被这个问题折磨的朋友们也能解脱下。

解决方案:
1、等待最新版本更新,直接升级echarts
2、或者设置symbol为none将不开启点的绘制,或者是将showSymbol设置为false,这将只在touch的时候显示点。

最后附上issue
[Bug] Echart setoption内存会随时间增长且无法回收(必现) · Issue #20151 · apache/echarts (github.com)

posted @ 2024-07-24 15:07  idealy233  阅读(75)  评论(0编辑  收藏  举报