apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.58k stars 19.62k forks source link

[Bug] After echarts registers the map, it switches the route, generating memory (echarts 注册地图后,切换路由,产生内存泄漏) #19219

Open qingguoYan opened 1 year ago

qingguoYan commented 1 year ago

Version

5.4.0

Link to Minimal Reproduction

https://codesandbox.io/s/condescending-dubinsky-wlcpwt?file=/src/routers/echarts/index.js

Steps to Reproduce

  1. Open the chrome console. (打开控制台)
  2. In the memory option, route to home after manually clicking on garbage collection, take a heap snapshot. (在内存选项,路由为home,手动点击垃圾回收后,拍摄堆快照)
  3. Switch to the echarts map route, click on garbage collection, and take a snapshot of the heap.(切换到echarts map 路由,点击垃圾回收,拍摄堆快照)
  4. Switch to home routing again, click garbage collection, and take a heap snapshot.(再次切换到home 路由,点击垃圾回收,拍摄堆快照)
  5. At this point, the ECHARTS component is destroyed, and echarts dispose, but the last snapshot generated on the home route still has data from the ECHARTS map, such as the JSON data that saw the China map in the string still in memory。 (此时echarts组件销毁,并且echarts进行dispose,但是最后一个在home 路由生成的快照仍然存在echarts map的数据,比如string中看到china 地图的json数据仍然在内存中)
  6. Incredibly, if multiple switches stay at home and memory steadily rises, this is a memory leak bug, and I tried to set the echarts instance to null, but still didn't solve it。 (难以置信的是,如果多次切换路由停留在home后,内存稳定上升,这是一个内存泄露的bug,我尝试将echarts实例设置为null,但是仍然没有解决这个问题)

Current Behavior

echart register map,switch route to home, I think echarts should disapper from memory,but it is still in memory. and if I switch route some times and stop on the home route finally,Memory is growing slowly.

Expected Behavior

Echarts disappears from memory when I leave the ECHARTS route, and memory doesn't keep growing as I switch routes

Environment

- OS:windows10
- Browser:chrome 117.0.5938.150
- Framework:react、echarts

Any additional comments?

No response

echarts-bot[bot] commented 1 year ago

@qingguoYan It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] After echarts registers the map, it switches the route, generating memory **BODY** ### Version 5.4.0 ### Link to Minimal Reproduction https://codesandbox.io/s/condescending-dubinsky-wlcpwt?file=/src/routers/echarts/index.js ### Steps to Reproduce 1. Open the chrome console. 2. In the memory option, route to home after manually clicking on garbage collection, take a heap snapshot. 3. Switch to the echarts map route, click on garbage collection, and take a snapshot of the heap. (Switch to the echarts map route, click on garbage collection, and take a snapshot of the heap.) 4. Switch to home routing again, click garbage collection, and take a heap snapshot. (Switch to home routing again, click garbage collection, and take a heap snapshot.) 5. At this point, the ECHARTS component is destroyed, and echarts dispose, but the last snapshot generated on the home route still has data from the ECHARTS map, such as the JSON data that saw the China map in the string still in memory. (At this time, the echarts component is destroyed, and echarts disposes, but the last snapshot generated by the home route still contains the data of the echarts map. For example, the json data of the china map seen in the string is still in the memory) 6. Incredibly, if multiple switches stay at home and memory steadily rises, this is a memory leak bug, and I tried to set the echarts instance to null, but still didn't solve it. (Incredibly, if the memory steadily increases after switching routes multiple times and staying at home, this is a memory leak bug. I tried setting the echarts instance to null, but it still did not solve the problem) ### Current Behavior echart register map, switch route to home, I think echarts should disapper from memory, but it is still in memory. and if I switch route some times and stop on the home route finally,Memory is growing slowly. ### Expected Behavior Echarts disappears from memory when I leave the ECHARTS route, and memory doesn't keep growing as I switch routes ### Environment ```markdown - OS: windows10 - Browser:chrome 117.0.5938.150 - Framework:react、echarts ``` ### Any additional comments? _No response_
qingguoYan commented 1 year ago
  1. image Home page heap snapshot
  2. image echarts map heap snapshot, string includs map json data.
  3. image go back home route, heap snapshot still includes map json data.
qingguoYan commented 1 year ago

image I switched routes several times and ended up on the home route. After manually clicking on garbage collection, I generated a heap snapshot and saw that snapshot 7 generated more Geojson polygongeometry classes each time than snapshot 6. Why is that

plainheart commented 1 year ago

这个问题应该确实存在,当通过 registerMap 注册了之后,会被始终存储在全局的 storage 中,调用单个实例对象的 dispose 方法并不会清空这些缓存的 map。可能增加一个 unregisterXXX 之类的 API 会比较有用,以允许开发者卸载相关注册。

qingguoYan commented 1 year ago

@plainheart 这个其实还好,但是如果多次切换路由,每一次创建和销毁echart,内存都在缓慢的增长,我对比了堆快照,发现有一些类在echarts销毁后仍然在内存中,比如GeoJSONPolygonGeometry,这样会引起一个问题,假设用户永远不关闭浏览器,并一直使用页面,最终内存会超出,浏览器crash

qingguoYan commented 1 year ago

image 还有一些游离的节点存在内存中,很明显包括canvas这样和echart相关的