浅谈浏览器的垃圾回收机制和内存泄露

JavaScript使用垃圾回收机制来自动管理内存。

JS的回收机制分两种：1.标记清除 2.引用计数。各大浏览器常用的是前者。

比如，Chrome浏览器限制的所能使用的内存极限（64位为1.4GB，32位为1.0GB），这就意味着浏览器将无法直接操作一些大内存对象。

标记清除：

定义和用法：当变量进入环境时，将变量标记"进入环境"，当变量离开环境时，标记为："离开环境"。某一个时刻，垃圾回收器会过滤掉环境中的变量，以及被环境变量引用的变量，剩下的就是被视为准备回收的变量。

到目前为止，IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略，只不过垃圾收集的时间间隔互不相同。

  工作流程：

1. 垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。

2. 去掉环境中的变量以及被环境中的变量引用的变量的标记。

3. 再被加上标记的会被视为准备删除的变量。

4. 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

引用计数：

定义和用法：引用计数是跟踪记录每个值被引用的次数。

基本原理：就是变量的引用次数，被引用一次则加1，当这个引用计数为0时，被视为准备回收的对象。

   工作流程：

1. 声明了一个变量并将一个引用类型的值赋值给这个变量，这个引用类型值的引用次数就是1。

2. 同一个值又被赋值给另一个变量，这个引用类型值的引用次数加1.

3. 当包含这个引用类型值的变量又被赋值成另一个值了，那么这个引用类型值的引用次数减1.

4. 当引用次数变成0时，说明没办法访问这个值了。

5. 当垃圾收集器下一次运行时，它就会释放引用次数是0的值所占的内存。

但是循环引用的时候就会释放不掉内存。循环引用就是对象A中包含另一个指向对象B的指针，B中也包含一个指向A的引用。

因为IE中的BOM、DOM的实现使用了COM，而COM对象使用的垃圾收集机制是引用计数策略。所以会存在循环引用的问题。

解决：手工断开js对象和DOM之间的链接。赋值为null。IE9把DOM和BOM转换成真正的JS对象了，所以避免了这个问题。

内存管理

1、什么时候触发垃圾回收？

垃圾回收器周期性运行，如果分配的内存非常多，那么回收工作也会很艰巨，确定垃圾回收时间间隔就变成了一个值得思考的问题。

IE6的垃圾回收是根据内存分配量运行的，当环境中的变量，对象，字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态，严重影响浏览器性能。

IE7中，垃圾回收器会根据内存分配量与程序占用内存的比例进行动态调整，开始回收工作。

2、合理的GC方案：(1)、遍历所有可访问的对象; (2)、回收已不可访问的对象。

3、GC缺陷：(1)、停止响应其他操作；

4、GC优化策略：(1)、分代回收（Generation GC）;(2)、增量GC

开发过程中遇到的内存泄露情况

1、定义和用法：

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。C#和Java等语言采用了自动垃圾回收方法管理内存，几乎不会发生内存泄露。我们知道，浏览器中也是采用自动垃圾回收方法管理内存，但由于浏览器垃圾回收方法有bug，会产生内存泄露。

由于每次的垃圾回收开销都相对较大，并且由于机制的一些不完善的地方，可能会导致内存泄露。我们可以利用一些方法减少垃圾回收，并且尽量避免循环引用的问题。

例如，在对象结束使用后 ，令obj = null。这样利于解除循环引用，使得无用变量及时被回收。

再如，js中开辟空间的操作有new(), [ ], { }, function (){..}。在创建新对象的时候要尽量考虑增大对象的复用性。

2、内存泄露的几种情况:

虽然有垃圾回收机制，但是，我们编写代码操作不当还是会造成内存泄漏。

1. 意外的全局变量引起的内存泄漏。

原因：全局变量，不会被回收。

解决：使用严格模式避免。

2. 闭包引起的内存泄漏

原因：闭包可以维持函数内局部变量，使其得不到释放。

解决：将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对dom的引用。

3. 没有清理的DOM元素引用

原因：虽然别的地方删除了，但是对象中还存在对dom的引用

解决：手动删除。

4. 被遗忘的定时器或者回调

原因：定时器中有dom的引用，即使dom删除了，但是定时器还在，所以内存中还是有这个dom。

解决：手动删除定时器和dom。

5. 子元素存在引用引起的内存泄漏

原因：div中的ul li 得到这个div，会间接引用某个得到的li，那么此时因为div间接引用li，即使li被清空，也还是在内存中，并且只要li不被删除，他的父元素都不会被删除。

解决：手动删除清空。

内存泄露解决举例：

(1)、当页面中元素被移除或替换时，若元素绑定的事件仍没被移除，在IE中不会作出恰当处理，此时要先手工移除事件，不然会存在内存泄露。

实例如下:

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; 
overflow-wrap: break-word; font-family: &quot;Courier New&quot;
 !important; font-size: 12px !important;"><div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script></pre>

解决方法如下：

 <div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)、由于是函数内定义函数，并且内部函数--事件回调的引用外暴了，形成了闭包。闭包可以维持函数内局部变量，使其得不到释放。

实例如下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it's a empty function
    }
}

解决方法如下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

参考博文：

1.【面试题——js垃圾回收机制和引起内存泄漏的操作】https://blog.csdn.net/yingzizizizizizzz/article/details/77333996

2.【2018最新Web前端经典面试试题及答案】https://blog.csdn.net/wdlhao/article/details/79079660

3.【浅谈Chrome V8引擎中的垃圾回收机制】https://www.cnblogs.com/liangdaye/p/4654734.html

---

作者：龙波帝国------------------->打造我的IT帝国

欢迎交流，在下扣号：724711690，请备注：前端技术交流