文档 Dom 树 VS 分离的 Dom 树？

Question

正在使用 Chrome（新手 ：）查找内存泄漏

如何确定内存泄漏的位置？

什么是文档 DOM 树和分离的 DOM 树？

有人可以解释一下吗？

- NkS

Answer 1

识别内存泄漏的步骤。

1. 使用无痕模式打开Chrome浏览器。
2. 启动您的应用程序
3. 打开Chrome Dev工具（我喜欢在其自己的窗口中完全最大化打开）
4. 点击Profile
5. 使用Take Heap Snapshot选项并单击Snapshot
6. 执行一些特定的应用程序步骤
7. 通过单击左上角的黑色圆圈再次拍摄快照。
8. 重复第5到7步2次
9. 检查保留大小-如果它不断增加，则存在内存问题
10. 在时间轴选项卡下，点击垃圾回收器按钮。
11. 再次拍摄快照，看看内存是否降至合理水平。

识别分离的DOM树的步骤

12. 要检测分离的DOM树，请单击其中一个快照的Profile选项卡
13. 您将看到许多对象-尝试通过输入DOM来过滤它们，如下所示
14. 如果您看到任何分离的DOM树，则“可能”存在问题。如果您正在做一些需要保留一些DOM以进行克隆等操作的事情，则必须排除此类情况。 如果您看到此类DOM，特别是如果这是单页应用程序，则需要担心它们，因为其他应用程序很快会重新加载整个内容并清除内存.

15. 您可以像下面这样检查分离的DOM树。

16. 要检查DOM是什么，您可能希望将鼠标悬停在红色HTML元素上，如下所示。一旦找到DOM，这有助于调试。

“文档DOM树”是什么？

整个文档是一个大的DOM树。文档是XML格式，标签嵌套，从而形成一棵树（DOM - 文档对象模型）。

那么，“脱离的DOM树”是什么？

HTML元素是消耗内存的对象实例。每个这样的元素都可以在其上存储事件监听器和与之关联的数据。 现在，“脱离的DOM树”指的是那些存在于浏览器内存中但未附加到主DOM树（也就是“文档DOM树”）的DOM树。

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

解决这个问题是一个广泛的话题，因为您可能会看到一些不同的解决方法。请参考以下帖子以了解一些人已经采取的措施来解决此问题。

无法清除脱离的DOM元素

JavaScript内存泄漏：脱离的DOM树

- bhantol

---

@hbhantol，感谢您提供详细的信息。非常感谢您花费时间和精力。 :) - NkS

谢谢@bhantol！真的帮了大忙。 - samma89

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