JS垃圾回收机制与常见内存泄露的处理方法

内存的生命周期：

1. 分配你所需要的内存：

因为字符串、对象等没有固定的大小，js程序在每次创立字符串、对象的时候，程序都会分配内存来存储那个实体。

1. 用分配到的内存做点什么。
2. 不需要时将其释放回归：

在不需要字符串、对象的时候，需要释放其所占使用的内存，否则将会耗费完系统中所有可使用的内存，造成系统崩溃，这就是垃圾回收机制所存在的意义。

所谓的内存泄漏指的是：因为疏忽或者错误造成程序未可以释放那些已经不再用的内存，造成内存的白费。

垃圾回收机制：

在C和C++之类的语言中，需要手动来管理内存的，这也是造成许多不必要问题的根源。幸运的是，在编写js的过程中，内存的分配以及内存的回收完全实现了自动管理，我们不使用操心这种事情。

垃圾收集机制的原理：

垃圾收集器会按照固定的时间间隔，周期性的找出不再继续用的变量，而后释放其占使用的内存。

什么叫不再继续用的变量？

不再用的变量也就是生命周期结束的变量，是局部变量，局部变量只在函数的执行过程中存在，当函数运行结束，没有其余引使用(闭包)，那么该变量会被标记回收。

全局变量的生命周期直至浏览器卸载页面才会结束，也就是说全局变量不会被当成垃圾回收。

标记清理：当前采使用的垃圾收集策略

工作原理：

当变量进入环境时(例如在函数中公告一个变量)，将这个变量标记为“进入环境”，当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

1. 垃圾收集器会在运行的时候会给存储在内存中的所有变量都加上标记。
2. 去掉环境中的变量以及被环境中的变量引使用的变量的标记。
3. 那些还存在标记的变量被视为准备删除的变量。
4. 最后垃圾收集器会执行最后一步内存清理的工作，销毁那些带标记的值并回收它们所占使用的内存空间。

到2008年为止,IE、Chorme、Fireofx、Safari、Opera 都用标记清理式的垃圾收集策略，只不过垃圾收集的时间间隔互有不同。

引使用计数略：被废弃的垃圾收集策略

循环引使用：跟踪记录每个值被引使用的技术

在老版本的浏览器中(对，又是IE)，IE9以下BOM和DOM对象就是用C++以COM对象的形式实现的。

COM的垃圾收集机制采使用的就是引使用计数策略，这种机制在出现循环引使用的时候永远都释放不掉内存。

var element = document.getElementById('something');

var myObject = new Object();

myObject.element = element; // element属性指向dom

element.someThing = myObject; // someThing回指myObject 出现循环引使用(两个对象一直互相包含 一直存在计数)。

处理方式是，当我们不用它们的时候，手动切断链接：

myObject.element = null;

element.someThing = null;

淘汰：

IE9把BOM和DOM对象转为了真正的js对象，避免了用这种垃圾收集策略，消除了IE9以下常见的内存泄漏的主要起因。

IE7以下有一个公告狼藉的性可以问题，大家理解一下：

1. 256个变量，4096个对象(或者数组)字面或者者64KB的字符串，达到任何一个临界值会触发垃圾收集器运行。
2. 假如一个js脚本的生命周期一直保有那么多变量，垃圾收集器会一直频繁的运行，引发严重的性可以问题。

IE7已修复这个问题。

哪些情况会引起内存泄漏？

尽管有垃圾回收机制，但我们在编写代码的时候，有些情况还是会造成内存泄漏，理解这些情况，并在编写程序的时候，注意避免，我们的程序会更具健壮性。

意外的全局变量：

上文我们提到了全局变量不会被当成垃圾回收，我们在编码中有时会出现下面这种情况：

function foo() {

this.bar2 = '默认绑定this指向全局' // 全局变量=> window.bar2

bar = '全局变量'; // 没有公告变量 实际上是全局变量=>window.bar

}

foo();

当我们用默认绑定，this会指向全局，this.something也会创立一个全局变量，这一点可可以很多人没有注意到。

处理方法：在函数内用严格模式or细心一点

function foo() {

"use strict";

this.bar2 = "严格模式下this指向undefined";

bar = "报错";

}

foo();

当然我们也能手动释放全局变量的内存：

window.bar = undefined

delete window.bar2

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

当不需要setInterval或者者setTimeout时，定时器没有被clear，定时器的回调函数以及内部依赖的变量都不可以被回收，造成内存泄漏。

var someResource = getData();

setInterval(function() {

var node = document.getElementById('Node');

if(node) {

node.innerHTML = JSON.stringify(someResource));

// 定时器也没有清理

}

// node、someResource 存储了大量数据 无法回收

}, 1000);

处理方法： 在定时器完成工作的时候，手动清理定时器。

闭包：

闭包能维持函数内局部变量，使其得不到释放，造成内存泄漏。

function bindEvent() {

var obj = document.createElement("XXX");

var unused = function () {

console.log(obj,'闭包内引使用obj obj不会被释放');

};

// obj = null;

}

处理方法：手动解除引使用，obj = null。

循环引使用问题

就是IE9以下的循环引使用问题，上文讲过了。

没有清除DOM元素引使用：

var refA = document.getElementById('refA');

document.body.removeChild(refA); // dom删除了

console.log(refA, "refA"); // 但是还存在引使用 可以console出整个div 没有被回收

不信的话，能看下这个dom点击预览。

处理办法：refA = null;

console保存大量数据在内存中。

过多的console，比方定时器的console会导致浏览器卡死。

处理：正当利使用console，线上项目尽量少的用console，当然假如你要发招聘除外。

如何避免内存泄漏：

记住一个准则：不使用的东西，及时归还，毕竟你是'借的'嘛。

1. 减少不必要的全局变量，用严格模式避免意外创立全局变量。
2. 在你用完数据后，及时解除引使用(闭包中的变量，dom引使用，定时器清理)。
3. 组织好你的逻辑，避免死循环等造成浏览器卡慢，崩溃的问题。

关于内存泄漏：

1. 即便是1byte的内存，也叫内存泄漏，并不肯定是导致浏览器崩溃、卡慢才可以叫做内存泄漏。
2. 一般是堆区内存泄漏，栈区不会泄漏。

基本类型的值存在内存中，被保存在栈内存中，引使用类型的值是对象，保存在堆内存中。所以对象、数组之类的，才会发生内存泄漏。

1. 用chrome监控内存泄漏，能看一下这篇文章