一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第11天，点击查看活动详情。
本题难度：⭐ ⭐
本题类型：综合题、浏览器
答：
可以使用chrome 开发工具的 Performance 选项和 Memory 选项来排查内存泄漏。
写下面这么两个函数，一个用来故意创建很多 DOM 元素，一个用来在一个数组里不停地 push 大量数据，然后用一个定时器去不断执行这两个函数。
function createNodes () {
for(let i = 0; i < 100; i++) {
let div = document.createElement('div')
div.appendChild(document.createTextNode(i))
document.body.appendChild(div)
}
}
let arr = []
function createArray() {
let foo = new Array(100000).fill({
name: 'lin'
});
arr.push(foo)
console.log(arr)
}
setInterval(() => {
createArray()
createNodes()
}, 1000);
这时，打开 Chrome 的开发者面板，点开 Performance 面板，拍下快照，如下图所示。
可以看到，JS Heap 和 Nodes 这两条线随着时间一直在上升，是因为我们刚才写的测试代码生效了。
但是光是这么一个快照无法看出究竟是哪里出错了，毕竟实际项目中函数调用错综复杂。
这时就可以打开 Mermory 面板，这里显示了每一项的内存占用情况，如下图所示。
可以很明显地看到，第一项里的 array 占用内存非常大且远超其他项，这时我们就可以重点排查一下这个array 是怎么产生的。
展开一看数据，果然就是我们刚才测试代码生成的。
结尾
在实际项目中，如果遇到了卡顿的情况，很有可能是内存泄漏造成的，如果无法主观地判断代码中哪里出了问题，就可以使用这种方式去排查、纠错。
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
你也可以关注《前端每日一问》这个专栏，防止失联哦～
我是阿林，输出洞见技术，再会！
上一篇：
「前端每日一问（47）」说一下 JS 的内存管理，举一些内存泄漏的例子。
下一篇：
