一、内存泄漏的概念

不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）
程序的运行需要内存，只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。
大多数语言提供自动内存管理，而不需要程序员手动释放内存，这被称为垃圾回收机制（garbage collector）

二、JavaScript 的垃圾回收机制

JavaScript中最常用的垃圾收集方式是标记清除(mark-and-sweep)。当变量进入环境（例如，在函数中声明一个变量）时，就将这个变量标记为“进入环境”。
从逻辑上讲，永远不能释放进入环境的变量所占的内存，因为只要执行流进入相应的环境，就可能用到它们。而当变量离开环境时，这将其标记为“离开环境”。

三、常见的内存泄漏

1、全局变量引起的内存泄漏
在JS中定义的全局变量是不会被销毁的，因为随时都可能会用到这个变量，所以不能被销毁。
当全局变量未被设置为 null 或者未被重新定义时，无法被回收。
与全局变量相关的、增加内存消耗的一个主因是缓存。缓存数据是为了重用，缓存必须有一个大小上限才有用。高内存消耗导致缓存突破上限，因为缓存内容无法被回收。

function leaks(){  
    leak = 'xxxxxx';    //leak 成为一个全局变量，不会被回收
}

解决方法：当全局变量用于临时存储或处理大量数据时，需要确保用完以后及时把它设置为 null 或者重新定义。
2、闭包引起的内存泄漏
闭包是 JavaScript 开发的一个关键方面：匿名函数可以访问父级作用域的变量。

var leaks = (function(){  
    var leak = 'xxxxxx';// 被闭包所引用，不会被回收
    return function(){
        console.log(leak);
    }
})()

//'xxxxxx'

3、DOM导致的内存
DOM清空或删除时，事件未清除导致的内存泄漏：

<div id="container"></div>
$('#container').bind('click', function(){
    console.log('click');
});

$('#container').remove();//事件未清除，内存泄漏

解决方法：清除绑定的事件，即可从内存中移除

<div id="container"></div>
$('#container').bind('click', function(){
    console.log('click');
});

$('#container').off('click').remove();

DOM子元素存在引用，引起的内存泄漏：
假如 JavaScript 代码中保存了表格某一个 <td> 的引用。将来决定删除整个表格的时候，直觉认为 GC 会回收除了已保存的 <td> 以外的其它节点。
实际情况并非如此：此<td> 是表格的子节点，子元素与父元素是引用关系。由于代码保留了 <td> 的引用，导致整个表格仍待在内存中。

var select = document.querySelector;
var tree = select('#tree');
var leaf = select('#leaf');   //在COM树中leaf是tree的一个子结点

select('body').removeChild(tree);//tree不能被回收，因为leaf 还在

解决方法：需要在父元素移除之前，移除子元素的引用。

select('body').removeChild(leaf).removeChild(tree);

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

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

解决方法：清除定时器和回调函数

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

四、如何避免内存泄漏

1、减少不必要的全局变量，或者生命周期较长的对象，及时对无用数据进行垃圾回收；
2、注意程序逻辑，避免“死循环”引用；
3、避免创建过多的对象，遵循原则：不使用的东西要及时归还。

引申：
什么是内存溢出（out of menory）？
内存溢出（out of memory）：程序要求的内存，超出了系统所能分配的范围。如：用一个int型4字节的数据来装一个float型8字节的数据，就会产生内存溢出。在编程上，可以强制类型转换int XX = (int)float;只取float 4字节数据给int。

浅谈前端中的内存泄漏

浅谈前端中的内存泄漏

一、内存泄漏的概念

二、JavaScript 的垃圾回收机制

三、常见的内存泄漏

四、如何避免内存泄漏