How to debug what appears to be long pauses between GC events in Chrome Javascript

Question

I've been trying to optimize an angular site, and I'm getting a huge amount of delay in the responsiveness of my page when switching between certain routes. Each page displayed is not massive, but it has a fair number of elements in, and a reasonable number of bindings. I've already done what I can with bindonce, so I went and looked in the debugger with Chrome and I see most of my time appears to be spent doing GC.

What's strange is there seems to be huge gaps between each GC, and I'm trying to figure out what exactly those are.

I'm guessing it's when it's actually removing the items and the little bars are when it's doing the mark and sweep, but I'm not as familiar with this level of depth of analyzing JS. Most of my work has been in C++/C#/Java.

Answer 1

In half a second more than 20MB of garbage was collected. GC is pretty busy. This also means that your software is pretty busy as well, producing at least the same memory usage through certain objects. In order to better understand where the garbage came from, profiling heap allocations might prove useful at this point. Under Profiles, you might take snapshots of heap allocations and see what type of objects were created, which objects consumed the most memory etc.