I’m having hard times working with the Chrome memory profiler.
One of our client is complaining about Out-Of-Memory crashes.
I then started to investigate. The VueJs app is composed of a list with elements that open in a “in app” new tab once clicked. Typical workflow includes opening and closing many of these tabs along the day.
My hint was that there might be memory leaks when closing these tabs.
I then took 3 Heap snapshot doint these tests in a private tab, without browser add-ons:
- One with the app just landed on the list (Snapshot 5)
- One with element 1 of the list clicked and then the tab closed (Snapshot 6)
- One with 10 additional repetitions of “click on element 1 and close the tab”. (Snapshot 7)
I took additional one few minutes later in case GC was sleepy, but the ram amount didn’t change compared to snapshot 7.
Here is the result:
The increase between 5 and 6 could be explained by some libraries being loaded and kept in memory (I use Vue, and load asynchronously my components.)
However the increase between 6 and 7 seems to highlight a memory leak.
When comparing snapshot 7 to 6, here is what I get:
I don’t have a clue about what is this PerformanceMeasure that take most of the sizeDelta. Is it an internal chrome thing ? then why is it shown in the memory profiler ? 🤔 What about (compiled code) also ?
Note: This is not the first time I’m fighting with memory leaks, and last time it was due to a library.
Maybe it’s the case here again.
NOTE: I’ve been of course checking youtube and websites for guidance on this but could only find things relating to old versions of chrome and/or not relevant.
I can provide the heap snapshots on demand.