js进阶 - javascript内存管理 - 《前端相关技术成长笔记》

什么是内存泄漏
内存生命周期
内存管理系统：手动or自动
可达性（Reachability）">可达性（Reachability）
一个简单的例子">一个简单的例子
两个引用">两个引用
相互关联的对象">相互关联的对象
无法到达的岛屿">无法到达的岛屿
常见的四种内存泄漏
内部算法">内部算法
- 一些优化建议：
总结">总结

对于开发者来说，JavaScript 的内存管理是自动的、无形的。我们创建的原始值、对象、函数……这一切都会占用内存。
当我们不再需要某个东西时会发生什么？JavaScript 引擎如何发现它并清理它？

什么是内存泄漏

内存泄漏可以定义为程序不再使用或不需要的一块内存，但是由于某种原因没有被释放仍然被不必要的占有。在代码中创建对象和变量会占用内存，但是javaScript是有自己的内存回收机制，可以确定那些变量不再需要，并将其清除。但是当你的代码存在逻辑缺陷的时候，你以为你已经不需要，但是程序中还存在着引用，导致程序运行完后并没有合适的回收所占用的空间，导致内存不断的占用，运行的时间越长占用的就越多，随之出现的是，性能不佳，高延迟，频繁崩溃。在深入了解内存泄漏之前，我们需要知道一下几点：

内存生命周期
内存管理系统
垃圾回收算法
内存生命周期
不管什么程序语言，内存生命周期基本是一致的：文章封面图

分配你所需要的内存
使用分配到的内存（读、写）
不需要时将其释放\归还

所有语言第二部分都是明确的。第一和第三部分在底层语言中是明确的，但在像JavaScript这些高级语言中，大部分都是隐含的。

内存管理系统：手动or自动

不同的语言通过不同的方式来处理其内存。

低级语言：像C语言这样的低级语言一般都有底层的内存管理接口，比如 malloc()和free()。
高级语言：JavaScript是在创建变量（对象，字符串等）时自动进行了分配内存，并且在不使用它们时“自动”释放。释放的过程称为垃圾回收。这个“自动”是混乱的根源，并让JavaScript（和其他高级语言）开发者错误的感觉他们可以不关心内存管理。
可达性（Reachability）
JavaScript 中主要的内存管理概念是可达性。
简而言之，“可达”值是那些以某种方式可访问或可用的值。它们一定是存储在内存中的。

这里列出固有的可达值的基本集合，这些值明显不能被释放。比方说：这些值被称作根（roots）。
- 当前执行的函数，它的局部变量和参数。
- 当前嵌套调用链上的其他函数、它们的局部变量和参数。
- 全局变量。
- （还有一些内部的）
如果一个值可以通过引用或引用链从根访问任何其他值，则认为该值是可达的。比方说，如果全局变量中有一个对象，并且该对象有一个属性引用了另一个对象，则该对象被认为是可达的。而且它引用的内容也是可达的。下面是详细的例子。

在 JavaScript 引擎中有一个被称作垃圾回收器) 的东西在后台执行。它监控着所有对象的状态，并删除掉那些已经不可达的。

一个简单的例子

这里是一个最简单的例子：

// user 具有对这个对象的引用 
let user = {   name: "John" };

这里的箭头描述了一个对象引用。全局变量 “user” 引用了对象 {name：”John”}（为简洁起见，我们称它为 John）。John 的 “name” 属性存储一个原始值，所以它被写在对象内部。
如果 user 的值被重写了，这个引用就没了：

user = null;

现在 John 变成不可达的了。因为没有引用了，就不能访问到它了。垃圾回收器会认为它是垃圾数据并进行回收，然后释放内存。

两个引用

现在让我们想象下，我们把 user 的引用复制给 admin：

// user 具有对这个对象的引用 
let user = {   name: "John" }; 
let admin = user;

现在如果执行刚刚的那个操作：

user = null;

……然后对象仍然可以被通过 admin 这个全局变量访问到，所以对象还在内存中。如果我们又重写了 admin，对象就会被删除。

相互关联的对象

现在来看一个更复杂的例子。这是个家庭：

function marry(man, woman) {   
  woman.husband = man;   
  man.wife = woman;   
  return {     
    father: man,    
    mother: woman   
  } 
} 
let family = marry({   name: "John" }, {   name: "Ann" });

marry 函数通过让两个对象相互引用使它们“结婚”了，并返回了一个包含这两个对象的新对象。
由此产生的内存结构：

到目前为止，所有对象都是可达的。
现在让我们移除两个引用：

delete family.father; 
delete family.mother.husband;

仅删除这两个引用中的一个是不够的，因为所有的对象仍然都是可达的。
但是，如果我们把这两个都删除，那么我们可以看到再也没有对 John 的引用了：

对外引用不重要，只有传入引用才可以使对象可达。所以，John 现在是不可达的，并且将被从内存中删除，同时 John 的所有数据也将变得不可达。
经过垃圾回收：

无法到达的岛屿

几个对象相互引用，但外部没有对其任意对象的引用，这些对象也可能是不可达的，并被从内存中删除。
源对象与上面相同。然后：

family = null;

内存内部状态将变成：

这个例子展示了可达性概念的重要性。
显而易见，John 和 Ann 仍然连着，都有传入的引用。但是，这样还不够。
前面说的 “family” 对象已经不再与根相连，没有了外部对其的引用，所以它变成了一座“孤岛”，并且将被从内存中删除。

常见的四种内存泄漏

1. 全局变量

在非严格模式下当引用未声明的变量时，会在全局对象中创建一个新变量。在浏览器中，全局对象将是window，这意味着

function foo（arg）{      
  bar =“some text”; // bar将泄漏到全局.
}

为什么不能泄漏到全局呢,我们平时都会定义全局变量呢!!!
原因 :全局变量是根据定义无法被垃圾回收机制收集.需要特别注意用于临时存储和处理大量信息的全局变量。如果必须使用全局变量来存储数据，请确保将其指定为null或在完成后重新分配它。
解决办法: 严格模式

2. 被遗忘的定时器和回调函数

var someResource = getData();
setInterval(function() {
    var node = document.getElementById('Node');
    if(node) {
        node.innerHTML = JSON.stringify(someResource));
        // 定时器也没有清除
    }
    // node、someResource 存储了大量数据 无法回收
}, 1000);

原因:与节点或数据关联的计时器不再需要，node 对象可以删除，整个回调函数也不需要了。可是，计时器回调函数仍然没被回收（计时器停止才会被回收）。同时，someResource 如果存储了大量的数据，也是无法被回收的。
解决方法：在定时器完成工作的时候，手动清除定时器

3. DOM引用

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

原因: 保留了DOM节点的引用,导致GC没有回收
解决办法：refA = null;
注意: 此外还要考虑 DOM 树内部或子节点的引用问题。假如你的 JavaScript 代码中保存了表格某一个的引用。将来决定删除整个表格的时候，直觉认为 GC 会回收除了已保存的以外的其它节点。实际情况并非如此：此是表格的子节点，子元素与父元素是引用关系。由于代码保留了的引用，导致整个表格仍待在内存中。保存 DOM 元素引用的时候，要小心谨慎。

4. 闭包

注意、注意、注意: 闭包本身没有错,不会引起内存泄漏.而是使用错误导致.

var theThing = null; 
var replaceThing = function () {   
  var originalThing = theThing;   
  var unused = function () {     
    if (originalThing)       
      console.log("hi");   };   
  theThing = {     
    longStr: new Array(1000000).join('*'),     
    someMethod: function () {       
      console.log(someMessage);     
    }   
  };
}; 
setInterval(replaceThing, 1000);

原因：这是一段糟糕的代码,每次调用 replaceThing ，theThing 得到一个包含一个大数组和一个新闭包（someMethod）的新对象。同时，变量 unused 是一个引用 originalThing 的闭包（先前的 replaceThing 又调用了theThing）。最重要的事情是，闭包的作用域一旦创建，它们有同样的父级作用域，作用域是共享的。someMethod 可以通过 theThing 使用，someMethod 与 unused 分享闭包作用域，尽管 unused 从未使用，它引用的 originalThing 迫使它保留在内存中（防止被回收）。当这段代码反复运行，就会看到内存占用不断上升，垃圾回收器（GC）并无法降低内存占用。本质上，闭包的链表已经创建，每一个闭包作用域携带一个指向大数组的间接的引用，造成严重的内存泄漏。
解决: 去除unuserd函数或者在replaceThing函数最后一行加上 originlThing = null.

内部算法

垃圾回收的基本算法被称为 “mark-and-sweep”。
定期执行以下“垃圾回收”步骤：

垃圾收集器找到所有的根，并“标记”（记住）它们。
然后它遍历并“标记”来自它们的所有引用。
然后它遍历标记的对象并标记它们的引用。所有被遍历到的对象都会被记住，以免将来再次遍历到同一个对象。
……如此操作，直到所有可达的（从根部）引用都被访问到。
没有被标记的对象都会被删除。

例如，使我们的对象有如下的结构：

我们可以清楚地看到右侧有一个“无法到达的岛屿”。现在我们来看看“标记和清除”垃圾收集器如何处理它。
第一步标记所有的根：

然后它们的引用被标记了：

……如果还有引用的话，继续标记：

现在，无法通过这个过程访问到的对象被认为是不可达的，并且会被删除。

我们还可以将这个过程想象成从根溢出一个巨大的油漆桶，它流经所有引用并标记所有可到达的对象。然后移除未标记的。
这是垃圾收集工作的概念。JavaScript 引擎做了许多优化，使垃圾回收运行速度更快，并且不影响正常代码运行。

一些优化建议：

分代收集（Generational collection）—— 对象被分成两组：“新的”和“旧的”。许多对象出现，完成它们的工作并很快死去，它们可以很快被清理。那些长期存活的对象会变得“老旧”，而且被检查的频次也会减少。
增量收集（Incremental collection）—— 如果有许多对象，并且我们试图一次遍历并标记整个对象集，则可能需要一些时间，并在执行过程中带来明显的延迟。所以引擎试图将垃圾收集工作分成几部分来做。然后将这几部分会逐一进行处理。这需要它们之间有额外的标记来追踪变化，但是这样会有许多微小的延迟而不是一个大的延迟。
闲时收集（Idle-time collection）—— 垃圾收集器只会在 CPU 空闲时尝试运行，以减少可能对代码执行的影响。

还有其他垃圾回收算法的优化和风格。尽管我想在这里描述它们，但我必须打住了，因为不同的引擎会有不同的调整和技巧。而且，更重要的是，随着引擎的发展，情况会发生变化，所以在没有真实需求的时候，“提前”学习这些内容是不值得的。当然，除非你纯粹是出于兴趣。我在下面给你提供了一些相关链接。

总结

主要需要掌握的内容：

垃圾回收是自动完成的，我们不能强制执行或是阻止执行。
当对象是可达状态时，它一定是存在于内存中的。
被引用与可访问（从一个根）不同：一组相互连接的对象可能整体都不可达。

现代引擎实现了垃圾回收的高级算法。

javascript内存管理