文档Dom树与独立Dom树? [英] Document Dom tree vs Detached Dom tree?

问题描述

我正在使用chrome(newbie :))查找内存泄漏

如何识别内存泄漏的地方?

什么是文档DOM树和独立Dom树?

有人可以解释一下吗?

解决方案

确定内存泄漏的步骤.

1. 从隐身模式Chrome开始.
2. 打开您的应用程序
3. 打开Chrome开发工具(我想在其自己的窗口中将其完全打开)
4. 点击配置文件
5. 使用获取堆快照"选项，然后单击快照"
6. 对您的应用执行一些特定步骤
7. 通过单击左上角的黑色圆圈拍摄另一个快照.
8. 将第5步到第7步再重复2次
9. 检查保留大小-如果它继续增加-您遇到内存问题
10. 在时间轴"选项卡下，单击垃圾收集器"按钮.
11. 拍摄另一个快照，看看内存是否下降到合理水平.

确定分离的DOM树的步骤

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

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

16. 要检查它是什么DOM，您可能需要将鼠标悬停在Red HTML元素上，如下所示.找到DOM后，这有助于调试

什么是文档DOM树"? 整个Document是里面的一棵大DOM树.文档是XML，标签被嵌套，从而形成一棵树. (DOM-文档对象模型.)

那么独立的DOM树"是什么?

HTML元素是消耗内存的对象的实例. 每个此类元素都可以在其上存储事件侦听器和与其关联的数据. 现在，分离的DOM树"不过是浏览器内存中但未附加到主DOM树又称为文档DOM树"的DOM.

通过检查这些悬挂的物体，我们可以检测到问题并避免内存泄漏.

解决这个问题是一个广泛的话题，因为您可能会看到一些各种各样的解决方案.请按照以下文章中有关某些人为解决此问题所做的工作.

似乎无法清除分离的DOM元素

JavaScript内存泄漏:分离的DOM树

Am finding memory leaks using chrome(newbie :))

How to identify where the memory is leaking?

And what is Document DOM tree and Detached Dom tree?

Can any one explain me?

解决方案

Steps to identify memory leaks.

1. Start with incognitive mode Chrome.
2. Bring up your application Open
3. Open Chrome Dev tool ( I like to open it full maximized in its own window)
4. Click on Profile
5. Use Take Heap Snapshot option and Click Snapshot
6. Do some specific steps with your app
7. Take another snapshot by clicking on the black circle on the top left corner.
8. Repeat step 5 to 7 for 2 more times
9. Check the Retained Size - if it keeps on increasing - you have a memory problem
10. Under Timeline tab click on Garbage Collector button.
11. Take another snapshot and see if memory comes down to a reasonable level.

Steps to identify Detached DOM Trees

12. To detect Detached DOM trees click on the Profile tab on one of the Snapshots
13. You will see lot of objects - try filtering them by typing DOM as shown
14. If you see any Detached DOM Trees then you "may" have a problem. It is possible that what you are doing might require you to keep some DOM aside for cloning etc. So this must be ruled out. If you see any DOMs beyond this you need to worry about them, especially if this is a Single Page Application, because other apps reload the whole thing soon and that may clear the memory.

15. You can inspect the detached DOM trees as shown below.

16. To check what DOM is it you may want to hover over the Red HTML elements as shown below. This helps in debugging once you located the DOM

What are "Document DOM Trees" ? The whole Document is a big DOM Tree inside . Document is XML and the tags are nested thus forming a tree. (DOM - Document Object Model.)

So what are "Detached DOM Trees" ?

HTML elements are instance of objects that consume memory. Each such element can store on them event listeners and data associated with it. Now "Detached DOM Trees" are nothing but DOMs that are in the Browser's memory but are NOT attached to the main DOM tree aka "Document DOM Trees".

By examining these hanging objects we can detect issues and avoid memory leaks.

Solving this problem is a vast topic as you may see some varied solutions out there. Follow following posts for what some people have done to remove the problem.

Can't seem to cleanup detached DOM elements

Javascript Memory Leaks: Detached DOM tree

这篇关于文档Dom树与独立Dom树?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！