其实无论在开发什么，或多或少都会遇到内存泄漏。但是究其根本，问题大多都是存在于代码的缘故，作为一名有追求的开发人员，我们不仅要追求功能，更要追求代码的性能。今天我就抽点时间来谈谈所谓的内存泄漏。
###一、 什么是内存泄漏 有点程序基础的知道，程序的运行是需要分配内存空间的。而对于一个持续使用的网页端来说，如果一些不能用到的内存没有被及时释放，这就叫 内存泄漏 。但是我们都知道，我们网页端的承载量是有限的，不断的往一个气球里面不断吹气，气球总有吹爆的一刻。浏览器的表现就是浏览器崩溃。
引用计数
：垃圾回收器会定期扫描内存，当某个内存中的值被引用为零时就会将其回收。当前变量已经使用完毕但依然被引用，导致垃圾回收器无法回收这就造成了内存泄漏。
###三、内存泄漏的识别办法 对于内存泄漏识别办法，我主要是从阮大神的博客里面学习到的。主要有：浏览器和命令行两种
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可以持续的记录堆分配的情况，显示了对象在什么时候被创建、什么时候存在内存泄漏等。
上面是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、 定时器
