优化了三年经验者的Echarts卡顿 |
您所在的位置：网站首页 › steamdeckwin10很卡 › 优化了三年经验者的Echarts卡顿 |
优化了三年经验者的Echarts卡顿
|
这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战 前言 在线音乐戳我呀！ 音乐博客源码上线啦！ 前几篇讲了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 resizewindow监听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 点击 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 点击 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的属性真的多，但又间接说明他的强大，可扩展性强，又不得不想起和女神共处事的日子，那个时候我还是那个少年。 👍 如果对您有帮助，您的点赞是我前进的润滑剂。 以往推荐前端仔，快把dist部署到Nginx上 多图详解，一次性啃懂原型链（上万字） 老湿说的万物皆对象，你也信？ Vue-Cli3搭建组件库 Vue实现动态路由（和面试官吹项目亮点） 项目中你不知道的Axios骚操作（手写核心原理、兼容性） VuePress搭建项目组件文档 vue-typescript-admin-template后台管理系统 原文链接juejin.cn/post/703617… |
【本文地址】