使用多个 echarts 图表后，页面卡住、白屏？

1. 问题表现

在项目的网站首页，绘制了 5 个 echarts 图表，每次进入页面，都会去后台获取最新的数据，用于绘制图表。

测试通过 --> 上线… 相安无事，peace and love💕！

直到有一天，有人连续点了若干次的刷新页面，发现，页面卡住了，除了关闭这个页面，已经不能进行其它的任何操作了。

开始想办法！

2. 解决办法

打开任务管理器后，发现这个页面进程的 CPU 占用率最高的时候，竟然达到了30%多，这自然就会卡了。

通过浏览 echarts 官网，发现了一个解决办法：

1. 使用 svg 作为图表的渲染器

至于为什么，可以查看官网这个链接

设置代码如下：

chart = $echarts.init(
  document.getElementById(this.id),
   null,
   {
     renderer: "svg",
   }
 );

在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。

在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：

• 在需要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 水球图 等，SVG 渲染器可能效果更好。
• 数据量很大、较多交互时，可以选用 Canvas 渲染器。

2. 组件销毁时，仅清空 echart 实例，而非销毁

使用 svg 作为图表渲染器后，占有率的确少了一些，但是还是重复刷新容易卡住，需要继续探索。

之前的代码中，在组件销毁前，都会使用 dispose 方法来销毁 echart 实例，在 mounted 生命周期钩子中，又重新创建 echart 实例。

将 dispose 方法 改为仅用 clear 方法来清空图表后，页面明显不卡了。

关键部分代码如下：

mounted(){
 // 1. 创建图表实例
 if (!chart) {
    chart = this.$echarts.init(
      document.getElementById(this.id),
      "classic",
      {
        renderer: "svg",
      }
    );
  }
 
 ......
},

beforeDestroy() {
 if (!chart) {
   return;
 }
chart.clear();
}

3. echarts 实例不要挂载在 vue 实例上

echarts 图表实例不要放在 data 数据对象中，不然，每次构建响应式数据对象，都会耗费很多的时间和空间，容易出现页面卡顿的现象。

关键部分代码如下所示：

<script>
...
let chart = null;
...
</script>

4. 监听页面刷新事件，销毁或清空图表实例

F5 页面刷新或者利用地址栏前面的刷新按钮来刷新页面时，并不会走vue中的 destroy 相关的生命周期，因此，也并不会销毁或清空之前的图表实例。

因此，需要监听页面刷新事件， 在刷新发生时，手动触发 destroy 相关的生命周期。

关键部分代码如下所示：

methods: {
   clearChart(){
   	// 手动触发 destroy 相关的生命周期
     this.$destroy();
   }
}

mounted(){
	...
	window.addEventListener('beforeunload', this.clearChart);
	...
}

beforeDestroy() {
  if (!chart) {
    return;
  }

  // 清空 resize 事件处理函数
  window.removeEventListener("resize", this.resize);
  // 清空 beforeunload 事件处理函数
  window.removeEventListener('beforeunload', this.clearChart);

  // 组件销毁前，回收图表
  chart.dispose();
  // chart.clear();
  chart = null;
}

🎉🎉🎉🌹🌹🌹