为了排查chrome插件对内存占用的干扰，最好再隐身模式下调试代码；
谷歌浏览器对内存的调试有两个可用面板：性能（Merformance）+ 内存（Memory）
一般先在性能（Merformance）面板录制内存占用随时间变化的图像，对是否存在内存泄漏有个直观的判断；然后在内存（Memory）面板定位问题发生的位置；
<!DOCTYPE html>
<html>
<head>
<title>
Memory Profile
</title>
</head>
<body>
<button onclick="grow()">Global Var</button>
<script type="text/javascript">
function LargeObj() {
this.largeArr = new Array(1000000);
}
var x = [];
function grow() {
var o = new LargeObj();
x.push(o);
}
</script>
</body>
</html>
（1）看内存变化情况
（2）执行可疑操作，前后怕快照，查看
(3) 定位内存分配在代码中的位置
蓝色条、灰色条可以看到内存分配和回收的时机和频率
分离的dom是指dom从dom树中移除了，但是代码js中存在对它的引用
<!DOCTYPE html>
<html>
<head>
<title>
Memory Profile
</title>
</head>
<body>
<button id="button">移除列表</button>
<ul id="list">
<li>项目 1</li>
</ul>
<script type="text/javascript">
var button = document.getElementById('button');
var list = document.getElementById('list');
button.addEventListener('click', function () {
list.remove();
});
</script>
</body>
</html>
（生产建议去掉打印语句）
注明：本文是对视频的总结
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。