记录一次定时器及闭包问题造成的内存泄漏

前言

这是一篇记录工作上所遇到的关于内存泄漏问题及如何解决的文章。

问题描述

先大概描述一下我的问题：

技术栈: 框架:vue 组件库: ant design of vue 图表：g2.

项目需求: 在下图的看板中, 需要每20秒切换一次下面的两个小蓝点, 以达到切换并刷新图表的功能.前提是不用web socket等轮询工具.

下图的组件结构:
switch-flex-chart 组件由 flex-chart 组件和 switch-icon-card 两个组件组合而成, 我通过给switch-icon-card 组件(也就是两个小蓝点) 添加一个定时器, 每20秒改变一下index,并且回调给父组件 (switch-flex-chart) 然后刷新并改变 flex-chart 组件里的图表数据.

img

造成的问题: 刚开始还好,但是如果时间久了,就会造成页面非常的卡顿, 可是在代码中, 我在生命周期-销毁阶段的里每次都会把定时器给清除并置为null

一、定时器要及时清除

这里轮询的功能我没有使用setInterval，而是使用了两个setTimeout：

<template></template>

<script>
export default {
  created() {
        this.init()
  },
  mounted() {},
  data() {
    return {
        duration: 20000, // 多久刷新一次
        _timer: null // 定时器
    }
  },
  methods: {
    init () { // 初始化
        if (this.duration > 0) {
          this._timer && clearTimeout(this._timer)
          this._timer = null
          this.polling()
        }
    },
    autoPlay () { // 切换的函数
        ...
    },
    polling () {
        this._timer = setTimeout(() => {
          this.autoPlay()
          this._timer && clearTimeout(this._timer)
          this.polling() // 循环调用自身
        }, this.duration)
    }
  }
}
</script>

如上面的代码，我在每次轮询polling的时候，都会使用clearTimeout来清除一下定时器，但是我发现在你切换到其他页面的时候，定时器还是在默默地执行着，于是我想到了在组件每次销毁的时候也必须把定时器也销毁：

destroyed() { // 生命周期-组件销毁
    this._timer && clearTimeout(this._timer) // 先使用clearTimeout
    this._timer = null // 最好将定时器也设置为null
}

二、图表数据及时清空

上面的方式解决了切换页面定时器还在运行的问题，但是还是没有解决页面会很卡顿的情况。正常来说就算定时器跑的再久也不会有这个问题。所以肯定是有哪里造成了内存泄漏。

为了验证是不是这个原因，我打开了chrome的F12控制台。然后找到了Memory：

memory

在这里你可以记录JavaScript对象的堆快照，查找到内存泄漏。

此时我每10秒录制一个快照，分别对应Snapshot1-3，发现JavaScript对象的总大小一次比一次大，要不了一会我的浏览器就卡的不行了。

堆快照

首先我想到的是不是图表内容没有清空，所以我在每次绘制g2图表的时候先执行了一遍g2内置的方法destory()进行销毁。

<template></template>

<script>
export default {
  created() {
        this.init()
  },
  mounted() {},
  data() {
    return {
        chart: null
    }
  },
  methods: {
      init () {
        if(this.chart){ // 如果存在的话就销毁图表再重新生成
          this.chart.destroy()
        }
        this.chart = new G2.Chart({
            ...
        })
      }
  }
</script>

以为大功告成的我再次打开浏览器，发现内存泄漏的问题并没有解决。于是我想这个图表对象是不是也要像定时器一样，在销毁的时候释放内存呢？

动手试试：

destroyed () {
    this.chart.destroy()
    this.chart = null
}

处理完之后，我再次录制了三个快照，这次JavaScript对象的大小没有再增长了，并且我页面挂在那半个小时也丝毫没有卡顿的迹象。

后记

虽然问题解决了，但我还不是很清楚，为什么在初始化的时候使用this.chart.destroy()不能够释放内存，而非要使用设置成null的方式。Google了g2的destory()之后也是蹦出了一堆LOL里的G2...

在此也要感谢 OBKoro1 的倾囊相助。

参考文章：

谈一谈我在前端开发的时候遇到的过的内存泄漏

JS高程中的垃圾回收机制与常见内存泄露的解决方法