Understanding Chrome Heap Profile

Question

I am trying to diagnose an SPA. I took two snapshots, one right after another, while the app was idle. Here is a snapshot below. As you can see, the shallow size of these objects is huge. But I have no idea what they are, or where in the code they come from. The (compiled code) does not make sense to me, nor do deoptimization_data or relocation_info.

Does anyone know how to use this information to actually track down leaks in a sizable app?

Answer 1

Please use the technique described here: Tool to track down JavaScript memory leak

Javacript engine in Chrome, called v8, does number of things for executing scripts fast. Actually it compiles on the fly all your js code (JIT). The compiled code may become unnecessary if you removes all the calls and references to it. ie you may have an element in the DOM tree with event listener and at some moment you may remove this element from the DOM tree. As a result the code for the event listener will become unnecessary and v8 should be able to delete that code. So, v8 keeps the compiled code in the same managed heap as for your objects, arrays, strings etc.

When you are looking into the heap snapshot you see everything that was in the heap including everything related to the code like code relocation info, deoptimization data, arrays with line-ends, the script texts etc.