在前端开发中，内存问题是影响页面性能的关键因素之一，包括内存泄漏 、内存膨胀和频繁的垃圾回收等。这些问题不仅影响用户体验，还可能导致页面崩溃。幸运的是，Chrome开发者工具提供了一系列功能来帮助我们诊断和解决这些内存问题。
首先，我们可以使用Chrome任务管理器来实时监控内存使用情况。
点击右上角的三个点-更多工具-任务管理器
打开任务管理器后，右击标题栏，勾选“JavaScript使用的内存”。
这个工具可以告诉我们页面当前使用了多少内存，包括原生内存和JS堆内存。原生内存主要存储DOM节点，而JS堆内存则涉及到JavaScript对象。如果我们发现内存使用量在不断增加，这可能是内存泄漏的信号。
接下来，我们可以利用性能记录功能来直观展示内存泄漏。通过在开发者工具的“性能”面板中选中内存复选框并进行录制，一段时间后点击停止
我们可以看到一段时间内内存用量的变化。如果JS堆的大小在不断增加，这可能意味着我们的页面存在内存泄漏问题。
此外，堆快照是一个非常有用的工具，它可以帮助我们发现已分离的DOM树，这是内存泄漏的常见原因。当一个DOM节点被从DOM树中移除，但仍然被JavaScript代码引用时，它就变成了一个已分离的节点。
下面是一个已分离的 DOM 节点的简单示例:
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
点击代码中引用的按钮可创建一个包含 10 个 li 子级的 ul 节点。这些节点由代码引用，但不存在于 DOM 树中，因此它们已分离。
通过堆快照，我们可以找到这些节点，并分析它们为何没有被垃圾回收。
创建好快照后，点击快照，类过滤器中输入 Detached ，即可在结果中搜索分离状态的 DOM 节点。
下方的信息告诉我们是 detached 这个变量保留了这个 DOM 节点的引用。
分配时间轴记录是另一个强大的工具，它可以帮助我们识别JS堆中的内存泄漏。通过记录内存分配的时间线，我们可以看到新分配的内存，并分析这些分配是否可能导致内存泄漏。
要显示分配时间线，请考虑使用以下代码：
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
切换到内存面板，选中“时间轴上的分配插桩”，点击录制
录制一段操作后点击停止。
通过查看新分配的对象的详细信息，您可以看到它已被分配给 Window 范围内的 x 变量。
最后，如果我们的页面似乎经常暂停，这可能是频繁垃圾回收的问题。我们可以通过Chrome任务管理器或性能记录来发现这种情况。一旦确定了问题，我们就可以使用分配时间轴记录来找出内存正在分配的位置，以及哪些函数导致了分配。
总之，Chrome开发者工具为我们提供了强大的功能来诊断和解决内存问题。通过这些工具，我们可以确保我们的页面性能得到优化，为用户提供更流畅的体验。
原文链接：https://juejin.cn/post/7332767759431860262 作者：辰火流光
