In Chrome devtools profiler, what do the recursive retaining trees mean

Question

As an example, the following

Note: The afterSubMenuRender parts of the tree after all expand to bound_this in function native_bind() @686283

the code in question is below

ContextMenuItem = function(mConfiguration)
{
        ...
    this.afterSubMenuRender = this.afterSubMenuRender.bind(this);

it doesn't make any difference if I replace with

this.afterSubMenuRender = this._afterSubMenuRender.bind(this);

The method is referenced from knockout, but I am seeing the below on plenty of objects around the application, including those referenced from knockout or just bound to jquery events or custom events. In all cases these are disposed. I've also found and fixed lots of memory leaks, but ones like the below don't seem to go away.

Can I just ignore it (since it is a detached tree?) or does it have a invisible retaining tree I just can't see in devtools or is there some other analysis I can do?

Answer 1

What version of Chrome do you use?

The best way to hunt agains memory leaks is to use Record Heap Allocations profile type. It continuously scan the heap for the new objects and shows them as a blue bar. If you repeated a scenario number of times and each iteration leaved a blue bar then with high probability there is a leak. You should stop the recording and select one bar in the overview window. When you do so the profiler will filter out all the objects that weren't allocated at that time. So, the only thing you need to understand is what object(s) retains these leaked objects. In the most of the cases there is at least one path from roots to the objects that keeps them alive.

As described here even DevTools console can be a retainer. In your case I'd suggest to enable "Show advanced heap snapshot properties" check box in the DevTools settings panel.