What is the DOM Node Count in google chrome's developer tools timeline memory view?

Question

I\'m getting an \"Aw, snap!\" chrome crash when a certain webpage is being loaded. I\'m trying my best to figure out what\'s causing it and having a really hard time.

In

Answer 1

The DOM node count graph shows the number of created DOM nodes that are still held in memory, i.e. which have not been garbage collected yet. This doesn't have to coincide with the elements you get through getElementsByTagName. The latter will also only get you the elements actually attached to the document tree. It won't get any 'offline' items to which you still have references.

An easy way to get stuck with this particular pyramid growth is the Like widget from the Facebook API, which contains some code on a run-away timer that creates boatloads of additional DOM nodes.

Answer 2

DOM nodes that are still held in memory are so called detached nodes. This means they are not shown in the DOM tree of your page, but some JavaScript code still references them somewhere. Read through this google dev tools post that explains what Detached DOM nodes are with simple code and how to detect it using Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/memory-problems/