Document Dom tree vs Detached Dom tree？

Question

使用chrome找到内存泄漏（新手:)）

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

什么是Document DOM树和Detached Dom树？

任何人都可以解释一下吗？

Answer 1

识别内存泄漏的步骤。

1. 从认知模式Chrome开始。
2. 打开您的应用程序打开
3. 打开Chrome开发工具（我喜欢在自己的窗口中完全打开它）
4. 点击个人资料
5. 使用Take Heap Snapshot选项和Click Snapshot
6. 使用您的应用执行某些特定步骤
7. 点击左上角的黑色圆圈拍摄另一张快照。
8. 再重复步骤5到7 2次
9. 检查保留大小 - 如果它继续增加 - 您有内存问题
10. 在“时间轴”选项卡下，单击“垃圾收集器”按钮。
11. 拍摄另一张快照，看看内存是否达到合理水平。

识别分离的DOM树的步骤

1. 要检测已分离的DOM树，请单击其中一个快照上的“配置文件”选项卡
2. 您将看到很多对象 - 尝试通过键入DOM来过滤它们，如
所示
3. 如果您看到任何分离的DOM树，那么您可以＆＃34;可能＆＃34;有一个问题。您正在做的事情可能需要您将一些DOM保留在一边以进行克隆等。因此必须排除这一点。如果您看到除此之外的任何DOM，您需要担心它们，特别是如果这是单页应用程序，因为其他应用程序很快会重新加载整个内容并且可能会清除内存。

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

5. 要检查DOM是什么，您可能希望将鼠标悬停在Red HTML元素上，如下所示。一旦找到DOM

，这有助于调试

什么是＆＃34;文档DOM树＆＃34;吗 整个Document里面是一个很大的DOM Tree。文档是XML，标签嵌套，从而形成树。 （DOM - 文档对象模型。）

那么＆＃34;分离的DOM树＆＃34;吗

HTML元素是消耗内存的对象的实例。 每个这样的元素都可以在其上存储事件监听器和与之关联的数据。 现在＆＃34;分离的DOM树＆＃34;只不过是浏览器内存中的DOM，但它们并没有附加到主DOM树上，也就是说＃DOM; Document DOM Trees＆＃34;。

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

解决这个问题是一个很大的话题，因为你可能会看到一些不同的解决方案。请按照以下帖子了解一些人为解决问题所做的工作。

Can't seem to cleanup detached DOM elements

Javascript Memory Leaks: Detached DOM tree