文档 Dom 树与分离的 Dom 树？

Posted 2023-03-07

【中文标题】文档 Dom 树与分离的 Dom 树？

【英文标题】：Document Dom tree vs Detached Dom tree?

【发布时间】：2014-05-28 05:56:12

【问题描述】：

我正在使用 chrome(newbie :)) 发现内存泄漏

如何识别内存泄漏的位置？

什么是 Document DOM 树和 Detached Dom 树？

谁能解释一下？

【参考方案1】：

识别内存泄漏的步骤。

从 Chrome 的非认知模式开始。 打开您的应用程序 打开 Chrome 开发工具（我喜欢在自己的窗口中完全最大化地打开它） 点击个人资料 使用获取堆快照选项并单击快照 对您的应用执行一些特定步骤 点击左上角的黑色圆圈拍摄另一个快照。 重复步骤 5 到 7 2 次以上 检查 Retained Size - 如果它不断增加 - 您有内存问题 在时间轴选项卡下单击垃圾收集器按钮。 再拍一张快照，看看内存是否降到了合理的水平。

识别分离的 DOM 树的步骤

要检测分离的 DOM 树，请单击其中一个快照上的配置文件选项卡 您会看到很多对象 - 尝试通过键入 DOM 来过滤它们，如图所示 如果您看到任何分离的 DOM 树，那么您“可能”遇到了问题。您正在做的事情可能需要您保留一些 DOM 以进行克隆等。所以必须排除这种情况。如果您看到超出此范围的任何 DOM，则需要担心它们，尤其是如果这是一个单页应用程序，因为其他应用程序很快会重新加载整个内容，这可能会清除内存。

您可以检查分离的 DOM 树，如下所示。

要检查它是什么 DOM，您可能需要将鼠标悬停在红色 html 元素上，如下所示。这有助于在您找到 DOM

后进行调试

什么是“文档 DOM 树”？ 整个 Document 里面就是一个很大的 DOM Tree。文档是 XML，标签是嵌套的，从而形成一棵树。 （DOM - 文档对象模型。）

那么什么是“分离的 DOM 树”？

HTML 元素是消耗内存的对象的实例。 每个这样的元素都可以在它们上存储事件侦听器和与之关联的数据。 现在，“分离的 DOM 树”只不过是浏览器内存中的 DOM，但未附加到主 DOM 树，即“文档 DOM 树”。

通过检查这些悬挂对象，我们可以发现问题并避免内存泄漏。

解决这个问题是一个广泛的话题，因为您可能会看到一些不同的解决方案。请关注以下帖子，了解一些人为解决问题所做的工作。

Can't seem to cleanup detached DOM elements

javascript Memory Leaks: Detached DOM tree

【讨论】：

@hbhantol，感谢您提供详细信息。感谢您的时间和精力。 :)

谢谢@bhantol！真的有帮助

另外，如果有人需要重新创建分离的 DOM 树场景，请按照以下步骤操作：developer.chrome.com/devtools/docs/heap-profiling-dom-leaks