老师，我问问关于前端在使用Echarts的时候的性能优化

Question

对于这种采用canvas的库，我们在引入过来后，如何更好的处理懒加载，给点方向

Answer 1

千迦 2017-08-20 08:49:49

hi～你好～

echarts懒加载的原理和图片懒加载的原理是一样的。因为echarts所挂载的dom节点，在渲染之前它的宽高都是设定好的，实际上它也是有个占位区域的。可以参考懒加载课程说的相关判定是否进入可视区域的方式，对echarts相关的dom节点进行判断就好。

主要是你要懒加载的是什么呢？如果是请求过多的话，那么可以在懒加载触发的时候，去请求相关的数据，请求回来之后进行echarts的渲染，那么这种情况下，最好在每个echarts的报表上有一个交互较好的loading动画，让用户能感知到这部分的数据在加载中。如果说是同时渲染效率的话，可以在懒加载触发的时候，去进行setOptions的操作，进行echarts的渲染。

canvas还是消耗内存比较多的， echarts在一些场景下也是会有一些内存泄漏的问题，对于需要重新渲染或者已经不用的echarts图表，可以调用echarts相关的如clear和dispose这样的api手动进行echarts变量的清理。

有什么问题可以继续交流

• 提问者 Dear君临 #1

  嗯，我们最近要做一个这样的项目，我将应用到项目中，遇到不懂的再和老师探讨，哈哈，谢谢老师的倾心解答！

• 千迦 回复 提问者 Dear君临 #2

  嗯～随时交流～