Document Dom tree vs Detached Dom tree?

Question

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?

Answer 1

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