如何用 Chrome 解决内存泄漏
简介
引用自 Google 的描述：
页面的性能随着时间的延长越来越差。 这可能是内存泄漏的症状。 内存泄漏是指，页面中的错误导致页面随着时间的延长使用的内存越来越多。
页面的性能一直很糟糕。 这可能是内存膨胀的症状。 内存膨胀是指，页面为达到最佳速度而使用的内存比本应使用的内存多。
页面出现延迟或者经常暂停。 这可能是频繁垃圾回收的症状。 垃圾回收是指浏览器收回内存。 浏览器决定何时进行垃圾回收。 回收期间，所有脚本执行都将暂停。因此，如果浏览器经常进行垃圾回收，脚本执行就会被频繁暂停。
举个官网的例子
有以下代码会导致内存泄漏问题
loop.js 代码
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
html 代码
<!DOCTYPE html>
<html>
<head>
<title>memory</title>
</head>
<body>
<p>hello,world</p>
<button id="grow">grow</button>
<script src="loop.js"></script>
</body>
</html>
如何解决
有以下两个步骤：
- 检测网页
- 找出内存泄漏的代码
- 代码修改
先说第一部分：如何检测
检测
用 Chrome 开发工具进行检测，
- 在 Chrome 的
开发者工具上打开 Performance 面板。 - 点击 Memory 复选框。
- 按红色那个 Record 按钮，进行记录
上图有两个地方需要关注的，就是下面蓝色的线。蓝色的线的起点不断增高，意味着有部分内存没有完全的回收释放掉，也就是说意味着页面会不断地占越来越多的内存。直至最后 Chrome 奔溃！
接着揪出元凶出来
如何找出
打开预览图，然后找一找，在蓝色线增高的点那里，我们在网页执行了什么的操作。
上图可看出，点击了按钮 grow ，这时可以直接去 grow 触发代码去观察的了。
如果还不是很确定的话，可以记录分配时间线：
- 打开开发者工具
- 然后转到
Memory面板，选择Record Allocation Timeline单选按钮按Start按钮，执行您怀疑导致内存泄漏的操作。完成后 - 按
Stop recording按钮
选中增高的蓝色线，下面在 Constructor 里看到最高的 string ，点击后，看下面。会观察到原来是代码中的 x 变量没有被释放。
修改代码
我们看到 grow() 的代码如下：
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
grow 执行的时候，会向 x 插入数据，而 x 这个变量则是一个全局变量(实际可以说是 Window对象下的属性)，而 x 这个变量没有释放，就导致不停地增加下去了。
我们来试一种避免内存泄漏的写法，避免使用全局变量。将变量写在函数里面，当函数执行完的时候 x 变量会释放
function grow() {
var x = [];
x.push(new Array(1000000).join('x'));
}
其它的方式：参考下面这篇文吧：
参考
这篇文大部分都引用 Google 的这篇文, 部分内容做出了修改
