Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 the Chrome Developer's tool there is a Memory Tab and when looking at the counter graphs, I notice that the DOM Node Count line steps up, drops, and then continues to rise.

Dom node count increasing

I understood this to mean that the DOM element counts on my page were increasing but after doing

document.getElementsByTagName("*").length 

in the console I noticed the value wasn't changing.

So what is the DOM Node count graph actually showing? If it continues increasing like this, could that potentially be the cause of the "Aw, snap!" crash?

like image 955
RoboKozo Avatar asked Jun 05 '12 17:06

RoboKozo


People also ask

How many nodes does a DOM have?

There are 12 node types. In practice we usually work with 4 of them: document – the “entry point” into DOM.

How do I check my DOM nodes?

# Search for nodes You can search the DOM Tree by string, CSS selector, or XPath selector. Focus your cursor on the Elements panel. Press Control + F or Command + F (Mac). The Search bar opens at the bottom of the DOM Tree.

What is DOM nodes in Performance Monitor?

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.


1 Answers

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.

like image 184
Ron Otten Avatar answered Sep 21 '22 11:09

Ron Otten