文档 Dom 树与分离的 Dom 树？

Question

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

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

什么是 Document DOM 树和 Detached Dom 树？

谁能解释一下？

Answer 1

识别内存泄漏的步骤。

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

识别分离的 DOM 树的步骤

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

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

16. 要检查它是什么 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