优化了三年经验者的Echarts卡顿
优化了三年经验者的Echarts卡顿
前言
- 在线音乐戳我呀！
- 音乐博客源码上线啦！
- 前几篇讲了Docker的安装部署，操作算是比较简单的。（入门级）
- 自从教需求学会去echarts官网找例子后，现在需求直接给我echarts链接，让我实现出来。
- 你以为的原封不动？实则是在此基础上，再画龙添足。
- 有一次说加载数据太多，页面会卡顿，需求立马上官网写上5k数据，说还可以啊。可以是可以，但人家显示一个，你要一个页面显示5个图表，这性能加载翻五倍了呀，姐姐。
- 接下来将分享工作以来写Echarts心得，一五一十盘出。
- Are you ready ？
一、存在问题
echarts图位置变小，变形之后还出现卡顿现象。
下面我们分析为什么会存在该问题。
二、还原场景
有一个按钮，点击之后，echarts图占的位置变小，此时echarts会变形，需要重新计算大小。那么怎么计算呢？
三、进行分析
三年经验者的思路。
3.1 ResizeObserver
使用浏览器提供的一个API：ResizeObserver，ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。
mounted() {
this.objResizeObserver = new ResizeObserver(() => {
if (this.lineChart) {
console.log(111)
this.lineChart.resize()
}
})
this.objResizeObserver.observe(this.$refs.chartBox)
}
复制代码如果在ResizeObserver内部打印一下，会发现点击按钮时，echarts图占的位置变小，会多次触发ResizeObserver，因为宽度在不停的变动，所以打印50次111（因为有五个图），就意味着chart被resize十次，所以页面会导致很卡。
我问他，你不觉得你的页面很卡顿吗？他说还行吧，这个效果我已经优化过了。
原本他在ResizeObserver内部做了赋值，如果值不为空就不resize，说原来resize已经优化过了。
接着问：怎么不用resize方法，他说没用。
那好，我写给你看。
3.2 resize
window监听resize事件。如下：
window.addEventListener('resize', setTimeout(() => {
if (this.lineChart) {
console.log(666)
this.lineChart.resize()
}
}, 800))
复制代码如果在resize方法内部打印一下，会发现点击按钮时，echarts图占的位置变小，会触发resize，打印5次666（因为有五个图），就意味着chart只被resize一次，因为addEventListener、resize内部一个有做取消上一次的变化。明显不卡顿，被优化。
因为window绑定resize只是窗口变化会触发，但点击按钮的时候，echarts图占的位置变小，并不会触发resize窗口变化，这时，我们要点击按钮的时候，手动触发resize方法即可。
window监听resize事件只触发一次，就很优化。
好了，你现在还觉得哪里不行。
三年经验者：我一开始用resize就没用。
那你是不是没用定时器给它延迟resize计算呢？
没用的话，是因为echarts实例还没有加载好，就算此时resize计算宽高，也是计算不出的。自然达不到我们要的效果。也就不生效。
四、代码如下
有两种方案，一个是ResizeObserver，另一个是resize。
4.1 ResizeObserver
<div>
<button @click="btnClick">点击</button>
<div ref="chartBox" >
<div ref="lineChart"></div>
</div>
</div>
data() {
return {
lineChart: null,
objResizeObserver: null,
}
},
methods:{
// 点击事件
btnClick(){
// echarts图占的位置变小的逻辑
// ...
}
}
mounted() {
this.objResizeObserver = new ResizeObserver(() => {
if (this.lineChart) {
console.log(111) // 多次触发
this.lineChart.resize()
}
})
this.objResizeObserver.observe(this.$refs.chartBox)
},
destroyed() {
this.objResizeObserver = null
}
复制代码4.2 resize
<div>
<button @click="btnClick">点击</button>
<div ref="chartBox" >
<div ref="lineChart"></div>
</div>
</div>
data() {
return {
lineChart: null
}
},
methods:{
// 点击事件
btnClick(){
// echarts图占的位置变小的逻辑
// ...
this.reload()
},
reload() {
setTimeout(() => {
if (this.lineChart) {
console.log(666)
this.lineChart.resize()
}
}, 800)
},
},
mounted() {
window.addEventListener('resize', this.reload)
// 如果echarts图是v-if，这里还需要手动调用一次resize
this.reload()
},
destroyed() {
window.removeEventListener('resize', this.reload)
}
复制代码知识点
echarts、ResizeObserver、window.addEventListener、resize
后记
在写Echars的时候，要注意自适应，会不会变形，吐槽Echarts的属性真的多，但又间接说明他的强大，可扩展性强，又不得不想起和女神共处事的日子，那个时候我还是那个少年。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
