有关于内存泄漏

今天面试深圳的一家企业，面试官问我闭包的问题，我回答道：“使用不当可能会引起内存泄漏的问题”，然后面试官紧接着问：“那么在一个闭包函数里面，你会采用什么方法来避免或者优化内存泄漏的问题？”。没有回答出来。上网查阅了一下资料，终于搞懂了一些有关于闭包的问题。

首先我们要清楚内存泄漏的定义是什么？

　内存泄漏：程序中已经动态分配的堆内存由于某种原因程序未释放或无法释放而引发的各种问题（好比如页面渲染卡顿，加载缓慢，延迟增大，崩溃等等）

可能会出现内存泄漏的原因：

1.全局变量的定义，由于js对未声明的变量处理方式都是在全局对象上创建该对象的引用，要是在浏览器中的话就是window对象，变量在窗口关闭或者重新刷新页面之前都不会被释放，如果未声明的对象有大量缓存数据就会导致内存泄漏

解决办法：减少全局变量的声明或者使用严格模式，在javascript文件头部或者函数的顶部加上use strict

2.闭包引起的内存泄漏（造成闭包内存泄漏的原因是：闭包能读取函数内部的变量，然后让这些变量始终保存在内存中。如果在使用结束后没有将局部变量清除的话，就可能会导致内存泄漏）

解决办法：将事件的处理函数定义在外部，解除闭包，或者在定义事件处理函数的外部函数中　　　　

// bad   在循环中的表达式，能复用最好放在循环外面

for (var k = 0; k < 10; k++)

{ var t = function (a) { // 创建了10次 函数对象。

console.log(a) } t(k) }

// good

function t(a) {

console.log(a)

}

for (var k = 0; k < 10; k++) {

　　t(k)

}

t = null

3.没有清理的DOM元素引用（虽然别的地方删除了，但是对象中还存在对dom的引用） 解决方法：手动删除

4.被遗忘的定时器或者回调函数（定时器中有dom的引用，几时dom删除了，但是定时器还在，所以内存中还是有这个donm） 解决方法：在离开时删除定时器和dom，removeEventLister移除事件监听

vue 中容易出现内存泄露的几种情况

在 Vue SPA 开发应用，那么就更要当心内存泄漏的问题。因为在 SPA 的设计中，用户使用它时是不需要刷新浏览器的，所以 JavaScript 应用需要自行清理组件来确保垃圾回收以预期的方式生效。因此开发过程中，你需要时刻警惕内存泄漏的问题。

问题1：全局变量造成的内存泄露：声明的全局变量在切换页面的时候没有清空（解决方法：在页面卸载的时候顺便处理掉该引用）

问题2：监听在 window/body 等事件没有解绑（解决方法：在页面销毁的时候，顺便解除引用，释放内存）

问题3：绑在 EventBus 的事件没有解绑（解决方法：在页面卸载的时候也可以考虑解除引用）

问题4：每一个图例在没有数据的时候它会创建一个定时器去渲染气泡，页面切换后，echarts 图例是销毁了，但是这个 echarts 的实例还在内存当中，同时它的气泡渲染定时器还在运行。这就导致 Echarts 占用 CPU 高，导致浏览器卡顿，当数据量比较大时甚至浏览器崩溃。（解决方法：

加一个 beforeDestroy()方法释放该页面的 chart 资源，我也试过使用 dispose()方法，但是 dispose 销毁这个图例，图例是不存在了，但图例的 resize()方法会启动，则会报没有 resize 这个方法，而 clear()方法则是清空图例数据，不影响图例的 resize，而且能够释放内存，切换的时候就很顺畅了。

问题5：v-if 绑定到 false 的值，但是实际上 dom 元素在隐藏的时候没有被真实的释放掉。

链接：https://juejin.cn/post/6914092198170460168
来源：稀土掘金