前端内存泄漏

前端的学习已经进入了一个艰难的上升期，愈来愈发现本身学习的东西还多得多，须要掌握的知识面宽广了不少，知识点须要理解的深度也加深了不少。今天看到前端内存泄漏相关，本身总结总结，也便于本身之后学习记忆。因为经验所致，必然会有不足之处，欢迎指正！

什么是内存

内存是计算机中重要的部件之一，它是与CPU进行沟通的桥梁。计算机中全部程序的运行都是在内存中进行的，所以内存的性能对计算机的影响很是大。

什么是内存泄漏

内存泄漏（Memory Leak）是指程序中己动态分配的堆内存因为某种缘由程序未释放或没法释放，形成系统内存的浪费，致使程序运行速度减慢甚至系统崩溃等严重后果。 说白了就是 再也不用到的内存，没有及时释放，就叫作内存泄漏（memory leak）。

看完上面的解释，脑海中就会有一点概念，计算机正常运转会用到内存，内存像是一个中转站，他把你暂存的数据，立刻就会用到的数据存储在这，以让你更快捷方便的使用， 那你确定会想到一个问题，暂存的数据到底哪些该存储在这里，存储的东西不会一直在这，又是怎么消失的呢？

在个人理解，前端开发中，全局的、被引用的对象就会被保存在内存中。好比咱们常见的闭包：

function leak(arg) {
    this.arg = arg;
}

function test() {
    var l1= new leak('It is a leak');

    document.body.addEventListener('click', function() {
        l1.arg = 'Here you are!'
    })
}
test()
复制代码

很明显，l1被闭包环境引用，没法被回收

那么浏览器是怎么判断一个对象是否是该被垃圾回收了呢

对前端开发来讲只须要理解'引用计数法'就能够了 语言引擎有一张"引用表"，保存了内存里面全部的资源（一般是各类值）的引用次数。若是一个值的引用次数是0，就表示这个值再也不用到了，所以能够将这块内存释放。

代码层面内存泄露的缘由

1. 循环引用
2. 闭包
3. 全局变量
4. 没有清理的DOM元素引用
5. 被遗忘的定时器以及其中的引用

可能形成了内存泄漏要怎么排查

1. 咱们可使用chrome浏览器调试工具中的内存快照，点击左上角灰色原点就能够保存一份快照，记录此时内存使用状况 能够看到代码中明显的l1对象被引用致使没法释放，在快照中咱们也看到了一个leak实例在内存中。经过见=简单分析就能够知道是哪块代码出了问题

2. 若是是在Node环境下，能够用Node提供的process.memoryUsage()方法来检查内存泄露:具体方法能够参考阮一峰的例子： github.com/ruanyf/es6t…

• rss (resident set size) : 全部内存占用，包括指令区和堆栈。
• heapTotal : "堆"占用的内存，包括用到的和未用到的。
• heapUsed : 用到的堆。
• external : V8引擎内部C++对象占用的内存。

判断内存泄露以heapUsed为准。

如何处理

1. 避免循环引用等发生源
2. 变量致使的内存泄露，将变量清除 a = null
3. 事件监听致使的内存泄露，监听后移除