正在使用 chrome 发现内存泄漏(新手 :))
如何识别内存泄漏的位置？
什么是 Document DOM 树和 Detached Dom 树？
谁能解释一下？
最佳答案
识别内存泄漏的步骤。
- 从无认知模式 Chrome 开始。
- 打开您的应用程序
- 打开 Chrome Dev 工具(我喜欢在自己的窗口中将其最大化)
- 点击个人资料
- 使用 Take Heap Snapshot 选项并单击 Snapshot
- 对您的应用执行一些特定步骤
- 点击左上角的黑色圆圈再拍一张快照。
- 再重复步骤 5 到 7 2 次
- 检查保留大小 - 如果它继续增加 - 你有内存问题
- 在“时间轴”选项卡下，点击“垃圾收集器”按钮。
- 再拍一张快照，看看内存是否下降到合理的水平。
识别分离 DOM 树的步骤
- 要检测分离的 DOM 树，请单击其中一个快照上的“配置文件”选项卡
- 您会看到很多对象 - 尝试通过输入 DOM 来过滤它们，如图所示
- 如果您看到任何分离的 DOM 树，那么您“可能”遇到了问题。您正在做的事情可能需要您保留一些 DOM 用于克隆等。因此必须排除这种情况。如果您看到超出此范围的任何 DOM，则需要担心它们，尤其是如果这是一个单页应用程序，因为其他应用程序很快就会重新加载整个内容，这可能会清除内存。
您可以检查分离的 DOM 树，如下所示。
要检查它是什么 DOM，您可能需要将鼠标悬停在红色 HTML 元素上，如下所示。一旦找到 DOM
，这有助于调试
什么是“文档 DOM 树”？ 整个Document里面就是一个很大的DOM Tree。文档是 XML，标签是嵌套的，因此形成了一棵树。 (DOM - 文档对象模型。)
那么什么是“分离的 DOM 树”？
HTML 元素是消耗内存的对象实例。 每个这样的元素都可以在它们上面存储事件监听器和与之关联的数据。 现在“分离的 DOM 树”只不过是浏览器内存中的 DOM，但没有附加到主 DOM 树，也就是“文档 DOM 树”。
通过检查这些悬挂的对象，我们可以检测问题并避免内存泄漏。
解决这个问题是一个很大的话题，因为您可能会看到一些不同的解决方案。按照以下帖子了解一些人为解决问题所做的工作。
关于javascript - 文档 Dom 树与分离的 Dom 树？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23057287/