How to get size and number of javascript objects in browser memory

Question

I know that most of you will point me to the chrome profiler heap snapshot , but on a blank page (without js no css just html> body) it shows a heap size of 8mb and from 12 to 30 thousand objects depends on his mood, so this is absolutely a useless tool for this task, and I think this heap profiler has its own humble opinion about the data it shows, and not a fact, although the rest of the chrome dev tools are wonderful.

Basically my main 1page application continues to grow in memory, even though I do all the possible garbage collection dances, JSON.stringify(Obj).length throws action not secure for most objects, how can I track these zombies more easily than trial and error.

Answer 1

You use the Chrome Developer Tools, but as far as I know, they are the best. You just have to use them wisely.

Say you want to check if any action in your application affects memory. This could be rendering a view or getting some new data. Let me call it Action .

To find out how much memory is reserved and how much is left, first you need to get a measurable baseline and get rid of noise. You need three steps to achieve these goals.

• Warm up

  Launch the app (go to your website). Perform Action . Take a picture of the heap. This snapshot is discarded, but it starts the GC and gets a clean list. The warm-up also ensures that you do not get any distortion in your measured data: script evaluation, async source boot resources, etc.

• A basic level of

  Perform Action three times. Take a picture of the heap. This is the baseline on which we compare our memory and preservation. We do an Action three times to get a reasonable average if there is little variation in the execution path. Be sure to try repeating the Action same way every time.

• Measurement

  Perform Action three times. Take a picture of the heap.

You will now have three snapshots. The first one will be discarded, but we are interested in the Summary for Objects highlighted between snapshots 2 and 3 , as well as delta Comparison from snapshot 3 to snapshot 2. You can find these views from the bottom / status bar in the Profiles view.

The data that you see between the base and <strong> dimensions is the true memory profile for Action . After that, you just need to know how to interpret the data correctly. For this, I recommend the Google documentation in the profiler .

I do not think that at the moment there is a better tool or method. If this happens, I would like to hear about it.