为什么要垃圾回收（Why）？

由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。

JavaScript 垃圾回收机制原理（What)？

JavaScript 垃圾回收的机制很简单：

1.找出不再使用的变量 2.然后释放掉其占用的内存

但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔 周期性地执行。

JS 中垃圾回收方式(两种)

标记清除

1.工作原理：

当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。

  1. function test() {
  2.   var a = 10; //被标记，进入环境
  3.   var b = 20; //被标记，进入环境
  4. }
  5. test(); //执行完毕之后a、b又被标记离开环境，被回收

从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。

2.工作流程：

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

②.去除标记: 然后，去掉环境中的变量以及被环境中的变量引用的变量的标记

③.准备删除: 之后再被加上标记的变量会被视为准备删除的变量

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

  1. function fn1() {
  2.   var obj = { name: "thomas", age: 20 };
  3. }
  5. function fn2() {
  6.   var obj = { name: "thomas", age: 20 };
  7.   return obj;
  8. }
  10. var a = fn1();
  11. var b = fn2();

我们来看代码是如何执行的。
首先定义了两个 function，分别叫做 fn1 和 fn2，当 fn1 被调用时:进入 fn1 的环境，会开辟一块内存存放对象{name: ‘thomas’, age: 20}

而当调用结束后:就出了 fn1 的环境，那么该块内存会被 js 引擎中的垃圾回收器自动释放

在 fn2 被调用的过程中，返回的对象被全局变量 b 所指向，所以该块内存并不会被释放。

引用计数 方式

1.工作原理：

跟踪记录每个值被引用的次数。

2.工作流程：

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

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

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

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

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

3.关于 IE 的引用计数问题：

IE 中有一部分对象并不是原生 js 对象。例如，其内存泄露 DOM 和 BOM 中的对象就是使用 C++以 COM 对象的形式实现的，而 COM 对象的垃圾回收机制采用的就是引用计数策略。因此，即使 IE 的 js 引擎采用标记清除策略来实现，但 js 访问的 COM 对象依然是基于引用计数策略的。换句话说，只要在 IE 中涉及 COM 对象，就会存在循环引用的问题。

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

  1. function func() {
  2.   let obj1 = {};
  3.   let obj2 = {};
  4.   obj1.a = obj2; // obj1 引用 obj2
  5.   obj2.a = obj1; // obj2 引用 obj1
  6. }

解决: 手工断开 js 对象和 DOM 之间的链接。赋值为 null:

  1. obj1 = null;
  2. obj2 = null;

IE9 把 DOM 和 BOM 转换成真正的 JS 对象了，所以避免了这个问题。

什么情况会引起内存泄漏？

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

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

  1. function foo(){
  2.   sum="xxx";//sum成为一个全局变量，不会被回收

sum 没被声明,会变成一个全局变量,在页面关闭之前不会被释放。

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

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

自调用的函数，其 this 会指向 window

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

在 JavaScript 文件头部加上 ‘use strict’，可以避免此类错误发生。启用严格模式解析 JavaScript ，避免意外的全局变量。

闭包引起的内存泄漏

  1. function bindEvent() {
  2.   var obj = document.createElement("xxx");
  3.   obj.onclick = function () {
  4.     // Even if it is a empty function
  5.   };
  6. }

上面定义了事件回调时，由于是在函数内部定义的函数，并且内部函数—事件回调引用外部函数，形成了闭包。

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

  1. // 将事件处理函数定义在外面
  2. function bindEvent() {
  3.   var obj = document.createElement("xxx");
  4.   obj.onclick = onclickHandler;
  5. }
  6. // 或者在定义事件处理函数的外部函数中，删除对dom的引用
  7. function bindEvent() {
  8.   var obj = document.createElement("xxx");
  9.   obj.onclick = function () {
  10.     // Even if it is a empty function
  11.   };
  12.   obj = null;
  13. }

没有清理的 DOM 元素引用

有时，保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容，把每一行 DOM 存成字典（JSON 键值对）或者数组很有意义。此时，同样的 DOM 元素存在两个引用：一个在 DOM 树中，另一个在字典中。将来你决定删除这些行时，需要把两个引用都清除。

  1. var elements = {
  2.   button: document.getElementById("button"),
  3.   image: document.getElementById("image"),
  4.   text: document.getElementById("text"),
  5. };
  6. function doStuff() {
  7.   image.src = "http://some.url/image";
  8.   button.click();
  9.   console.log(text.innerHTML);
  10. }
  11. function removeButton() {
  12.   document.body.removeChild(document.getElementById("button"));
  13.   // 此时，仍旧存在一个全局的 #button 的引用
  14.   // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。
  15. }

虽然我们用 removeChild 移除了 button，但是还在 elements 对象里保存着#button 的引用，换言之，DOM 元素还在内存里面。

解决：手动删除 dom。

被遗忘的定时器或者回调

  1. var someResource = getData();
  2. setInterval(function() {
  3.     var node = document.getElementById('Node');
  4.     if(node) {
  5.         // 处理 node 和 someResource
  6.         node.innerHTML = JSON.stringify(someResource));
  7.     }
  8. }, 1000);

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

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

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

  1. var refA = document.getElementById("refA");
  2. var refB = document.getElementById("refB");
  3. document.body.removeChild(refA);

JS垃圾回收机制 - 图1

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

解决：手动删除清空。

垃圾回收的使用场景优化

1.数组 array 优化

  1. const arr = [1, 2, 3, 4];
  2. console.log(arr);
  3. // 可以直接让数字清空，而且数组类型不变。
  4. arr.length = 0;
  5. // arr = []; 虽然让a变量成一个空数组,但是在堆上重新申请了一个空数组对象。

将[]赋值给一个数组对象，是清空数组的捷径(例如： arr = [];),但是需要注意的是，这种方式又创建了一个新的空对象，并且将原来的数组对象变成了一小片内存垃圾！实际上，将数组长度赋值为 0（arr.length = 0）也能达到清空数组的目的，并且同时能实现数组重用，减少内存垃圾的产生。

2.对象尽量复用

  1. var t = {}; // 每次循环都会创建一个新对象。
  2. for (var i = 0; i < 10; i++) {
  3.   // var t = {};// 每次循环都会创建一个新对象。
  4.   t.age = 19;
  5.   t.name = "123";
  6.   t.index = i;
  7.   console.log(t);
  8. }
  9. t = null; //对象如果已经不用了，那就立即设置为null；等待垃圾回收。

对象尽量复用，尤其是在循环等地方出现创建新对象，能复用就复用。不用的对象，尽可能设置为 null，尽快被垃圾回收掉。

3.在循环中的函数表达式，能复用最好放到循环外面。

  1. // 在循环中最好也别使用函数表达式。
  2. for (var k = 0; k < 10; k++) {
  3.   var t = function (a) {
  4.     // 创建了10次  函数对象。
  5.     console.log(a);
  6.   };
  7.   t(k);
  8. }

推荐用法如下:

  1. function t(a) {
  2.   console.log(a);
  3. }
  4. for (var k = 0; k < 10; k++) {
  5.   t(k);
  6. }
  7. t = null;

什么放在内存中？什么不放在内存中？

基本类型是：Undefined/Null/Boolean/Number/String

基本类型的值存在内存中，被保存在栈内存中。从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本。

引用类型：object

引用类型的值是对象，保存在堆内存中。

1.包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。

2.js 不允许直接访问内存中的位置，也就是不能直接访问操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。

栈和堆的区别

一、堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；
2、堆（操作系统）： 一般由程序员分配释放，若程序员不释放，程序结束时可能由 OS 回收，分配方式倒是类似于链表。

二、堆栈缓存方式区别：

1、栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放；
2、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。

三、堆栈数据结构区别：

堆（数据结构）：堆可以被看成是一棵树，如：堆排序；
栈（数据结构）：一种先进后出的数据结构。