中高级前端必须了解的JS中的内存管理

来看一个循环引用的例子：

function f(){ 
 var o = {}; 
 var o2 = {}; 
 o.a = o2; // o 引用 o2 
 o2.a = o; // o2 引用 o 这里 
 return "azerty"; 
} 
f(); 

上面我们申明了一个函数 f ，其中包含两个相互引用的对象。

在调用函数结束后，对象 o1 和 o2 实际上已离开函数范围，因此不再需要了。

但根据引用计数的原则，他们之间的相互引用依然存在，因此这部分内存不会被回收，内存泄露不可避免了。

再来看一个实际的例子：

var div = document.createElement("div"); 
div.onclick = function() { 
 console.log("click"); 
}; 

上面这种JS写法再普通不过了，创建一个DOM元素并绑定一个点击事件。

此时变量 div 有事件处理函数的引用，同时事件处理函数也有div的引用!(div变量可在函数内被访问)。

一个循序引用出现了，按上面所讲的算法，该部分内存无可避免的泄露了。

为了解决循环引用造成的问题，现代浏览器通过使用标记清除算法来实现垃圾回收。

标记清除算法

标记清除算法将“不再使用的对象”定义为“无法达到的对象”。

简单来说，就是从根部(在JS中就是全局对象)出发定时扫描内存中的对象。

凡是能从根部到达的对象，都是还需要使用的。

那些无法由根部出发触及到的对象被标记为不再使用，稍后进行回收。

从这个概念可以看出，无法触及的对象包含了没有引用的对象这个概念(没有任何引用的对象也是无法触及的对象)。

但反之未必成立。

工作流程：

1. 垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。
2. 从根部出发将能触及到的对象的标记清除。
3. 那些还存在标记的变量被视为准备删除的变量。
4. 最后垃圾收集器会执行最后一步内存清除的工作，销毁那些带标记的值并回收它们所占用的内存空间。

循环引用不再是问题了

再看之前循环引用的例子：

function f(){ 
 var o = {}; 
 var o2 = {}; 
 o.a = o2; // o 引用 o2 
 o2.a = o; // o2 引用 o 
 return "azerty"; 
} 
f(); 

函数调用返回之后，两个循环引用的对象在垃圾收集时从全局对象出发无法再获取他们的引用。

因此，他们将会被垃圾回收器回收。

内存泄漏

什么是内存泄漏

程序的运行需要内存。只要程序提出要求，操作系统或者运行时(runtime)就必须供给内存。

对于持续运行的服务进程(daemon)，必须及时释放不再用到的内存。

否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。

本质上讲,内存泄漏就是由于疏忽或错误造成程序未能释放那些已经不再使用的内存，造成内存的浪费。

内存泄漏的识别方法

经验法则是，如果连续五次垃圾回收之后，内存占用一次比一次大，就有内存泄漏。

这就要求实时查看内存的占用情况。

在 Chrome 浏览器中，我们可以这样查看内存占用情况

1. 打开开发者工具，选择 Performance 面板
2. 在顶部勾选 Memory
3. 点击左上角的 record 按钮
4. 在页面上进行各种操作，模拟用户的使用情况
5. 一段时间后，点击对话框的 stop 按钮，面板上就会显示这段时间的内存占用情况

来看一张效果图：

我们有两种方式来判定当前是否有内存泄漏：

1. 多次快照后，比较每次快照中内存的占用情况，如果呈上升趋势，那么可以认为存在内存泄漏
2. 某次快照后，看当前内存占用的趋势图，如果走势不平稳，呈上升趋势，那么可以认为存在内存泄漏

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!