为什么要垃圾回收（Why）？
由于字符串、对象和数组没有固定大小，所有当他们的大小已知时，才能对他们进行动态的存储分配。JavaScript 程序每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，JavaScript 的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。
JavaScript 垃圾回收机制原理（What)？
JavaScript 垃圾回收的机制很简单：
1.找出不再使用的变量 2.然后释放掉其占用的内存
但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔 周期性地执行。
JS 中垃圾回收方式(两种)
标记清除
1.工作原理：
当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。
例如，在函数中声明一个变量，就将这个变量标记为“进入环境”。
function test() { var a = 10; //被标记，进入环境 var b = 20; //被标记，进入环境}test(); //执行完毕之后a、b又被标记离开环境，被回收
从逻辑上讲，永远不能释放进入环境的变量所占用的内存，因为只要执行流进入相应的环境，就可能会用到它们。
2.工作流程：
①.添加标记: 首先，垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记
②.去除标记: 然后，去掉环境中的变量以及被环境中的变量引用的变量的标记
③.准备删除: 之后再被加上标记的变量会被视为准备删除的变量
④.内存清除: 垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间
function fn1() { var obj = { name: "thomas", age: 20 };}function fn2() { var obj = { name: "thomas", age: 20 }; return obj;}var a = fn1();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 的引用。如下：
function func() { let obj1 = {}; let obj2 = {}; obj1.a = obj2; // obj1 引用 obj2 obj2.a = obj1; // obj2 引用 obj1}
解决: 手工断开 js 对象和 DOM 之间的链接。赋值为 null:
obj1 = null;obj2 = null;
IE9 把 DOM 和 BOM 转换成真正的 JS 对象了，所以避免了这个问题。
什么情况会引起内存泄漏？
虽然有垃圾回收机制,但是我们编写代码操作不当还是会造成内存泄漏。
意外的全局变量引起的内存泄漏。
function foo(){ sum="xxx";//sum成为一个全局变量，不会被回收
sum 没被声明,会变成一个全局变量,在页面关闭之前不会被释放。
另一种意外的全局变量可能由 this 创建:
function foo() { this.variable = "potential accidental global";}// foo 调用自己，this 指向了全局对象（window）foo();
自调用的函数，其 this 会指向 window
解决: 使用严格模式避免。
在 JavaScript 文件头部加上 ‘use strict’，可以避免此类错误发生。启用严格模式解析 JavaScript ，避免意外的全局变量。
闭包引起的内存泄漏
function bindEvent() { var obj = document.createElement("xxx"); obj.onclick = function () { // Even if it is a empty function };}
上面定义了事件回调时，由于是在函数内部定义的函数，并且内部函数–事件回调引用外部函数，形成了闭包。
解决: 将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对 dom 的引用。
// 将事件处理函数定义在外面function bindEvent() { var obj = document.createElement("xxx"); obj.onclick = onclickHandler;}// 或者在定义事件处理函数的外部函数中，删除对dom的引用function bindEvent() { var obj = document.createElement("xxx"); obj.onclick = function () { // Even if it is a empty function }; obj = null;}
没有清理的 DOM 元素引用
有时，保存 DOM 节点内部数据结构很有用。假如你想快速更新表格的几行内容，把每一行 DOM 存成字典（JSON 键值对）或者数组很有意义。此时，同样的 DOM 元素存在两个引用：一个在 DOM 树中，另一个在字典中。将来你决定删除这些行时，需要把两个引用都清除。
var elements = { button: document.getElementById("button"), image: document.getElementById("image"), text: document.getElementById("text"),};function doStuff() { image.src = "http://some.url/image"; button.click(); console.log(text.innerHTML);}function removeButton() { document.body.removeChild(document.getElementById("button")); // 此时，仍旧存在一个全局的 #button 的引用 // elements 字典。button 元素仍旧在内存中，不能被 GC 回收。}
虽然我们用 removeChild 移除了 button，但是还在 elements 对象里保存着#button 的引用，换言之，DOM 元素还在内存里面。
解决：手动删除 dom。
被遗忘的定时器或者回调
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 也不会被释放。
解决：手动删除定时器和 dom。
子元素存在引用引起的内存泄漏
var refA = document.getElementById("refA");var refB = document.getElementById("refB");document.body.removeChild(refA);
原因：div 中的 ul li 得到这个 div，会间接引用某个得到的 li，那么此时因为 div 间接引用 li，即使 li 被清空，也还是在内存中，并且只要 li 不被删除，他的父元素都不会被删除。
解决：手动删除清空。
垃圾回收的使用场景优化
1.数组 array 优化
const arr = [1, 2, 3, 4];console.log(arr);// 可以直接让数字清空，而且数组类型不变。arr.length = 0;// arr = []; 虽然让a变量成一个空数组,但是在堆上重新申请了一个空数组对象。
将[]赋值给一个数组对象，是清空数组的捷径(例如： arr = [];),但是需要注意的是，这种方式又创建了一个新的空对象，并且将原来的数组对象变成了一小片内存垃圾！实际上，将数组长度赋值为 0（arr.length = 0）也能达到清空数组的目的，并且同时能实现数组重用，减少内存垃圾的产生。
2.对象尽量复用
var t = {}; // 每次循环都会创建一个新对象。for (var i = 0; i < 10; i++) { // var t = {};// 每次循环都会创建一个新对象。 t.age = 19; t.name = "123"; t.index = i; console.log(t);}t = null; //对象如果已经不用了，那就立即设置为null；等待垃圾回收。
对象尽量复用，尤其是在循环等地方出现创建新对象，能复用就复用。不用的对象，尽可能设置为 null，尽快被垃圾回收掉。
3.在循环中的函数表达式，能复用最好放到循环外面。
// 在循环中最好也别使用函数表达式。for (var k = 0; k < 10; k++) { var t = function (a) { // 创建了10次 函数对象。 console.log(a); }; t(k);}
推荐用法如下:
function t(a) { console.log(a);}for (var k = 0; k < 10; k++) { t(k);}t = null;
什么放在内存中？什么不放在内存中？
基本类型是：Undefined/Null/Boolean/Number/String
基本类型的值存在内存中，被保存在栈内存中。从一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本。
引用类型：object
引用类型的值是对象，保存在堆内存中。
1.包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。
2.js 不允许直接访问内存中的位置，也就是不能直接访问操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。
栈和堆的区别
一、堆栈空间分配区别：
1、栈（操作系统）：由操作系统自动分配释放 ，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈； 2、堆（操作系统）： 一般由程序员分配释放，若程序员不释放，程序结束时可能由 OS 回收，分配方式倒是类似于链表。
二、堆栈缓存方式区别：
1、栈使用的是一级缓存， 他们通常都是被调用时处于存储空间中，调用完毕立即释放； 2、堆是存放在二级缓存中，生命周期由虚拟机的垃圾回收算法来决定（并不是一旦成为孤儿对象就能被回收）。所以调用这些对象的速度要相对来得低一些。
三、堆栈数据结构区别：
堆（数据结构）：堆可以被看成是一棵树，如：堆排序； 栈（数据结构）：一种先进后出的数据结构。