CODEWITHSUNDEEP
javascriptmemory-leaksgarbage-collectiongoogle-chrome-devtools
Rob Johansen
Rob Johansen

Reputation: 5164

DOM nodes not garbage collected

I have a question about using Chrome's developer tools to debug memory leaks in a single-page web application.

According to Google's documentation, after taking a heap snapshot you'll see red and yellow detached DOM nodes. The yellow nodes are those still being reference by JavaScript, and effectively represent the cause of the leak. The red nodes are not directly referenced in JavaScript, but they're still "alive"—likely because they're part of a yellow node's DOM tree.

I've been able to fix several memory leaks by drilling down on all the yellow nodes in my heap snapshots and finding where in our code there was still a reference to them. However, now I've got a situation I'm not sure how to handle: Only red nodes are showing up in my heap snapshot!

If there is no JavaScript reference to these nodes, what are some other reasons that they wouldn't be garbage collected? Also, why does it say there are 155 entries but only show 60? I'm wondering if Chrome simply isn't showing one or more yellow nodes:

No references in JavaScript, but still not garbage collected?

Upvotes: 2

Views: 1881

Answers (1)

jfriend00
jfriend00

Reputation: 707328

Per your request, adding this as an asnwer. Have you looked at more details on any of these DOM elements to see which DOM elements they are and perhaps that gives you a clue as to what code would have ever referenced them. One source of references that trips some people up is closures that you are done with, but are still alive for some reason.

Upvotes: 1

Related Questions