面试官：说说 JavaScript 中内存泄漏的几种情况？

青旅半醒 2022-11-07 13:27 164阅读 0赞

![5219d0ea438ae16c2e45533be5f71286.png][]

## 一、是什么    ##

内存泄漏（Memory leak）是在计算机科学中，由于疏忽或错误造成程序未能释放已经不再使用的内存

并非指内存在物理上的消失，而是应用程序分配某段内存后，由于设计错误，导致在释放该段内存之前就失去了对该段内存的控制，从而造成了内存的浪费

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

对于持续运行的服务进程，必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃

![39cd87e1b2fb46b00da4523a389a9cf1.png][]

在`C`语言中，因为是手动管理内存，内存泄露是经常出现的事情。

char * buffer;
    buffer = (char*) malloc(42);
    
    // Do something with buffer
    
    free(buffer);

上面是 C 语言代码，`malloc`方法用来申请内存，使用完毕之后，必须自己用`free`方法释放内存。

这很麻烦，所以大多数语言提供自动内存管理，减轻程序员的负担，这被称为"垃圾回收机制"

## 二、垃圾回收机制 ##

Javascript 具有自动垃圾回收机制（GC：Garbage Collecation），也就是说，执行环境会负责管理代码执行过程中使用的内存

原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存

通常情况下有两种实现方式：

*  标记清除
 *  引用计数

### 标记清除 ###

`JavaScript`最常用的垃圾收回机制

当变量进入执行环境是，就标记这个变量为“进入环境“。进入环境的变量所占用的内存就不能释放，当变量离开环境时，则将其标记为“离开环境“

垃圾回收程序运行的时候，会标记内存中存储的所有变量。然后，它会将所有在上下文中的变量，以及被在上下文中的变量引用的变量的标记去掉

在此之后再被加上标记的变量就是待删除的了，原因是任何在上下文中的变量都访问不到它们了

随后垃圾回收程序做一次内存清理，销毁带标记的所有值并收回它们的内存

举个例子：

var m = 0,n = 19 // 把 m,n,add() 标记为进入环境。
    add(m, n) // 把 a, b, c标记为进入环境。
    console.log(n) // a,b,c标记为离开环境，等待垃圾回收。
    function add(a, b) {
      a++
      var c = a + b
      return c
    }

### 引用计数 ###

语言引擎有一张"引用表"，保存了内存里面所有的资源（通常是各种值）的引用次数。如果一个值的引用次数是`0`，就表示这个值不再用到了，因此可以将这块内存释放

如果一个值不再需要了，引用数却不为`0`，垃圾回收机制无法释放这块内存，从而导致内存泄漏

const arr = [1, 2, 3, 4];
    console.log('hello world');

面代码中，数组`[1, 2, 3, 4]`是一个值，会占用内存。变量`arr`是仅有的对这个值的引用，因此引用次数为`1`。尽管后面的代码没有用到`arr`，它还是会持续占用内存

如果需要这块内存被垃圾回收机制释放，只需要设置如下：

arr = null

通过设置`arr`为`null`，就解除了对数组`[1,2,3,4]`的引用，引用次数变为 0，就被垃圾回收了

### 小结 ###

有了垃圾回收机制，不代表不用关注内存泄露。那些很占空间的值，一旦不再用到，需要检查是否还存在对它们的引用。如果是的话，就必须手动解除引用

## 三、常见内存泄露情况 ##

意外的全局变量

function foo(arg) {
        bar = "this is a hidden global variable";
    }

另一种意外的全局变量可能由 `this` 创建：

function foo() {
        this.variable = "potential accidental global";
    }
    // foo 调用自己，this 指向了全局对象（window）
    foo();

上述使用严格模式，可以避免意外的全局变量

定时器也常会造成内存泄露

var someResource = getData();
    setInterval(function() {
        var node = document.getElementById('Node');
        if(node) {
            // 处理 node 和 someResource
            node.innerHTML = JSON.stringify(someResource));
        }
    }, 1000);

如果`id`为Node的元素从`DOM`中移除，该定时器仍会存在，同时，因为回调函数中包含对`someResource`的引用，定时器外面的`someResource`也不会被释放

包括我们之前所说的闭包，维持函数内局部变量，使其得不到释放

function bindEvent() {
      var obj = document.createElement('XXX');
      var unused = function () {
        console.log(obj, '闭包内引用obj obj不会被释放');
      };
      obj = null; // 解决方法
    }

没有清理对`DOM`元素的引用同样造成内存泄露

const refA = document.getElementById('refA');
    document.body.removeChild(refA); // dom删除了
    console.log(refA, 'refA'); // 但是还存在引用能console出整个div 没有被回收
    refA = null;
    console.log(refA, 'refA'); // 解除引用

包括使用事件监听`addEventListener`监听的时候，在不监听的情况下使用`removeEventListener`取消对事件监听

## 参考文献 ##

*  http://www.ruanyifeng.com/blog/2017/04/memory-leak.html
 *  https://zh.wikipedia.org/wiki

\--The End--

系列正在更新：23/33

*  [面试官：解释下什么是事件代理？应用场景？][Link 1]
 *  [面试官：Ajax 原理是什么？如何实现？][Ajax]
 *  [面试官：bind、call、apply 区别？如何实现一个bind?][bind_call_apply _bind]
 *  [面试官：说说你对正则表达式的理解？应用场景？][Link 2]
 *  [面试官：说说你对DOM的理解，常见的操作有哪些？][DOM]
 *  [面试官：说说你对BOM的理解，常见的BOM对象你了解哪些？][BOM_BOM]
 *  [面试官：举例说明你对尾递归的理解，有哪些应用场景][Link 3]

篇副有限，扫下方二维码查看往期

![e38e591c3bbda8c21452b94133acfd45.png][]

[5219d0ea438ae16c2e45533be5f71286.png]: /images/20221023/f6dda484751a40c1baae4a610ca10a35.png
[39cd87e1b2fb46b00da4523a389a9cf1.png]: /images/20221023/cb9ab365d77e4b0695caea3f80f8bac7.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10cb89cb67429f566962a6b4f76b953cbe1f59d35e8b338dbb6d1b42d2e0e647ca0fe47f5c&idx=2&mid=2247485919&scene=21&sn=15d93516f2118b13700a1e6e2ee1a56a#wechat_redirect
[Ajax]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c850cb674146578a56b5ef940658d17bc23c1e14fa5b07305e961bdaaa8f7f3c2164770a&idx=2&mid=2247485958&scene=21&sn=46e5ebf66441b96445670f8cf27f8130#wechat_redirect
[bind_call_apply _bind]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c845cb6741531028162a16324db2f792f8943977918b3bc0364858cb448af7432113c48d&idx=1&mid=2247485971&scene=21&sn=51fd5036dfe93700c1d6b850150073de#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c81acb67410c458664ea37ee0598e0e85783afdc771e92772c2e3f619d465002d8897bc7&idx=2&mid=2247486028&scene=21&sn=7efbff142f8966159b2fb1cdfee22f34#wechat_redirect
[DOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8d0cb6741c63fa8c57b9b563b52ed2bf784c07980cbd832eb847cfd3f20b3f6d93f9735&idx=1&mid=2247486086&scene=21&sn=2a4320d54a65d71a5d5aab42dcde4e52#wechat_redirect
[BOM_BOM]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8cacb6741dce70f20ce120ee69fef2a8310513a62af0b84dc9f838f8f16a0d4cd0ae7ce&idx=2&mid=2247486108&scene=21&sn=d8feb34e4273ccca56e79853030e7036#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU1OTgxNDQ1Nw%3D%3D&chksm=fc10c8fccb6741ea44a2bdec53066645ee306ebda5e8888acece65811a2578aa94cf5ff1f7e6&idx=1&mid=2247486122&scene=21&sn=9c6642610382251b87ba1cc6d128ed72#wechat_redirect
[e38e591c3bbda8c21452b94133acfd45.png]: /images/20221023/4bb0a4ce85cf426c86870db6bc006d18.png