Search code examples
javascriptjquerymemory-leaksgoogle-chrome-devtools

What is InternalNode in chrome heap profile

I am diagnosing a memory leak in a jQuery based single page application using the Chrome DevTools heap snapshot tool as described on https://developer.chrome.com/docs/devtools/memory-problems/#discover_detached_dom_tree_memory_leaks_with_heap_snapshots

I have solved some issues this way, but I have now hit a roadblock where I can no longer determine what is keeping an object in memory. For example, for one of the objects it returns the following retainers: heap snapshot

From what I can tell, the object is retained because it's used inside a closure scope of a click event. But the click event is on a detached HtmlDivElement, which should be garbage collected. It is somehow linked to the window object via InternalNode objects. I have searched all over the internet, but I'm unable to find what these InternalNode objects are.

My question is, what are these InternalNode objects and how I can "free" them so my objects are garbage collected.

Solution

  • TL;DR
    Leak is caused by https://crbug.com/1177010
    Clicking on an element outside the detached element prevents the memory leak from occuring.

    Following @wOxxOm's comment, I have compiled a version of Chromium with the enable_additional_blink_object_names flag enabled so that it shows the names of the InternalNode objects. It appears blink:MouseEventManager is preventing the detached dom element from being garbage collected.

    enter image description here

    This finally lead me to https://crbug.com/1177010, which I could confirm by clicking outside the detached element before taking another heap snapshot.