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.
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?
There are 12 node types. In practice we usually work with 4 of them: document – the “entry point” into DOM.
# 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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With