前言
这是一篇记录工作上所遇到的关于内存泄漏问题及如何解决的文章。
问题描述
先大概描述一下我的问题：
技术栈: 框架: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 的倾囊相助。
参考文章：
网友评论