查找内存泄漏并了解分离的 DOM 树答案

【问题标题】：Finding memory leak and Understanding detached DOM tree查找内存泄漏并了解分离的 DOM 树
【发布时间】：2017-11-16 01:06:06
【问题描述】：

我正在使用 Chrome DevTools 在空闲条件下检查应用程序中的内存泄漏。内存时间线记录对我来说看起来不错，垃圾收集后 JS 堆中没有 JS 增加。

但是当我拍摄堆快照时，我可以看到有分离的 DOM 树。这是否意味着正在发生内存泄漏？如果是，那么为什么内存时间线没有记录堆大小的增加。下面是堆快照的屏幕截图。

我还想了解它为分离的 DOM 树显示的信息。在文档 DOM 树 / 10656 个条目中显示 [6803]，以红色为边框。这个数字 6803 和 10656 是什么？提前感谢您的帮助。

【问题讨论】：

你看到一个你仍然有引用的分离节点。您看不到时间线的变化，因为它可能只发生过一次。
[6803] in Document DOM tree / 10656 entries 表示有 10656 个元素的集合，所选元素的索引为 6803。
@zerkms 感谢您的信息。还想问一件事。当我将鼠标悬停在 HTMLDocument 中的原生 HTMLDocument 上时，我会看到一个属性列表，例如 URL、活动元素、ajaxq 等。当我将鼠标悬停在窗口上时，我会在窗口中看到不同的对象。我应该如何继续定位对节点的引用？

【解决方案1】：

您正在查看内存时间线选项卡中的错误图表。您需要选中 Nodes 的绿色复选框来调查 DOM 内存泄漏。

内存泄露问题有两种，JS内存泄露和DOM内存泄露。在第一张图中，您正在寻找 JS 内存泄漏，但在内存快照中，您检查了 DOM 内存泄漏。

【讨论】：