其实无论在开发什么，或多或少都会遇到内存泄漏。但是究其根本，问题大多都是存在于代码的缘故，作为一名有追求的开发人员，我们不仅要追求功能，更要追求代码的性能。今天我就抽点时间来谈谈所谓的内存泄漏。
一、 什么是内存泄漏
有点程序基础的知道，程序的运行是需要分配内存空间的。而对于一个持续使用的网页端来说，如果一些不能用到的内存没有被及时释放，这就叫内存泄漏。但是我们都知道，我们网页端的承载量是有限的，不断的往一个气球里面不断吹气，气球总有吹爆的一刻。浏览器的表现就是浏览器崩溃。
二、 js的垃圾回收机制
js中的内存回收机制采用的是引用计数：垃圾回收器会定期扫描内存，当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用，导致垃圾回收器无法回收这就造成了内存泄漏。
三、内存泄漏的识别办法
对于内存泄漏识别办法，我主要是从阮大神的博客里面学习到的。主要有：浏览器和命令行两种
3.1、 浏览器
- 首先打开chrome，然后按下f12（windows）/option+command+i打开调试工具，选择memory。
- 根据下面的视图我们看到一共有
Heap snapshot（JS堆快照),Allocation instrumentation on timeline（JS堆分配时间线）,Allocation sampling三种堆快照类型 -
开始录制前先点击垃圾回收，再点击录制，单如果是js堆内存动态分配时间线的话，结束之前要再次点击下垃圾回收，再结束录制。
3.1.1
- Summary 总览视图：按构造函数分组。用于捕捉对象及其使用的内存。对于定位DOM内存泄露特别有用。
- Comparison 对比视图：对比两个快照。用于对比不同操作之后的堆快照，查看内存的释放及引用计数，来分析内存是否泄露及其原因。
- Containment 内容视图：查看堆内容。更适合查看对象结构，有助于分析对象的引用情况。适用于分析闭包以及深入分析对象。
- Statistics 统计视图：总览堆的统计信息。
3.1.1.1、 Summary总览视图
Constructor：构造函数，节点下的对象都是由改构造函数创建而来。
Distance：与根节点的距离。
Objects Count：对象个数及百分占比。
Shallow size：对象的直接内存总数，直接内存是指对象自身占用的内存大小。
-
Retained size：对象的最大保留内存，保留内存是指对象被删除后可以释放的那部分内存。
点击展开构造函数，可以看到所有构造函数相关的对象实例，@后面的数字是该对象实例的唯一标识符。
常见的顶层构造函数：
(global property)：全局对象和普通对象的中间对象，和常规思路不同。比如在Window上定义了一个Person对象，那么他们之间的关系就是[global] => (global property) => Person。之所以使用中间对象，是出于性能的考虑。
(closure)：使用函数闭包的对象。
(array, string, number, regexp)：一系列对象类型，其属性指向Array/String/Number/Regexp。
HTMLDivElement/HTMLAnchorElement/DocumentFragment：元素的引用或者代码引用的指定文档对象。
3.1.2 Comparasion对比视图
为了验证特定操作会不会引起内存泄露，对比快照的步骤如下：
1、无任何操作，拍第一个堆快照
2、执行你觉得可能造成内存泄露的操作，再执行相反操作
3、拍第二个堆快照，切换到对照视图，并且指定与第一个堆快照对比
3.1.2 JS堆分配时间线
通过Allocation instrumentation on timeline可以持续的记录堆分配的情况，显示了对象在什么时候被创建、什么时候存在内存泄漏等。
上面的柱条表示堆中生成的新对象。高度表示这个对象的大小，颜色表示这个对象的内存释放情况：蓝色柱表示这个对象在timeline中生成，结束前仍然存在；灰色柱表示这个对象在timeline中生成，但结束前已经被回收了。
我们可以重复执行某个动作，如果最后有不少蓝色柱被保留，这些蓝色柱就是潜在的内存泄露问题。
如果左边的意料之外的蓝条，那么极有可能存在内存泄露。
上面是Vue项目反复切换两个录制的堆分配行为，我们可以聚焦到某一次堆分配，查看具体对象信息。可以在柱状图中滑动鼠标滚轮查看某段时间的堆分配。比如上面发现有三个VueComponent没有回收。点击展开查看详细信息。发现这三个组件的信息都是一样的，那就是组件没有释放。首先确认组件是否被销毁。如果已销毁，确认事件是否解绑、定时器是否取消，特别注意事件总线绑定的事件一定要解绑。
3.2、 命令行
命令行可以使用 Node 提供的process.memoryUsage方法。
process.memoryUsage返回一个对象，包含了 Node 进程的内存占用信息。该对象包含四个字段，单位是字节，含义如下。
- rss（resident set size）：所有内存占用，包括指令区和堆栈。
- heapTotal："堆"占用的内存，包括用到的和没用到的。
- heapUsed：用到的堆的部分。
- external： V8 引擎内部的 C++ 对象占用的内存。
判断内存泄漏，以heapUsed字段为准。
四、vue中存在的内存泄漏
由于在vue单页面中，页面进行跳转的时候没有刷新页面，这就造成了内存泄漏不断堆积，导致页面卡顿或者页面崩溃。这里主要介绍我在开发的时候遇到的一些内存泄漏情况。
4.1、 闭包
function closure(){
var element = document.getElementById('mydiv');//element用完之后一直驻留在内存中
var test = element.innerHTML;
element.onclick = function () {
alert(test);//这里用element导致内存泄露
};
}
closure();
function closure(){
var element = document.getElementById('mydiv');
var test = element.innerHTML;
element.onclick = function () {
alert('test');
};
element = null;//这里直接回收了
}
4.2、 意外的全局变量
function foo(arg) {
bar = "aaaaa";
}
实际上等价于
function foo(arg) {
window.bar = "aaaaa";
}
这种情况是很多人都会见到的，我建议是使用es6的let或者是使用严格模式。
4.3、 定时器
var data=getData();
setInterval(function(){
var node=document.getElementById("name");
if(node){
node.innerHTML=JSON.stringify(data)
}
},1000)
4.4、 在生命周期中使用全局事件，然后没有做释放处理
onCreate(){
bus.%on('')
},
beforeDestroy() {
bus.$off('****');
}
4.5、 dom对象和js对象的互相引用，未置空
var obj = {};
document.getElementById('idname').property = testObject; //obj会一直存在直到dom被回收，这可能会造成内存泄漏
解决办法：
window.onunload=function(){
document.getElementById('idname').property = null; //释放内存
};
4.6、 keep-alive组件
在移除元素时的时候，如果你打算在内存中保留状态和元素该怎么做呢？这种情况下，你可以使用内建的 keep-alive组件。
当你用 keep-alive 包裹一个组件后，它的状态就会保留，因此就留在了内存里。
<button @click="show = false">Hide</button>
<keep-alive>
<!-- `<my-component>` 即便被删除仍会刻意保留在内存里 -->
<my-component v-if="show"></my-component>
</keep-alive>
这个技巧可以用来提升用户体验。例如，设想一个用户在一个文本框中输入了评论，之后决定导航离开。如果这个用户之后导航回来，那些评论应该还保留着。
一旦你使用了 keep-alive，那么你就可以访问另外两个生命周期钩子：activated 和 deactivated。如果你想要在一个 keep-alive 组件被移除的时候进行清理或改变数据，可以使用 deactivated 钩子。
deactivated: function () {
// 移除任何你不想保留的数据
}
4.7、echarts引起的内存泄漏
解决方案
chart.dispose(myChart)
myChart = chart.init(document.getElementById(dom));
myChart.setOption(option);
说在最后
其实所谓的内存泄漏，无非就是用过的东西没有及时的回收 导致部分内存长期被占用，一个优秀的程序员是不回让内存长期保持高占用的状态的。虽然前端只管实现和页面效果，但是深究起页面性能还是有点说法的。作为一名有追求的程序员，还是希望自己能够多多注意这些方面，多多提升自己在敲代码的时候的专业知识积累。
