Chrome heap snapshots statistics, what does the grey color represent?

Question

What does the grey color represents in above chart?

Importunity

Was just about to ask this exact same question. Appears that chrome developers felt it was too obvious (to them) to even show! – Nun

Did you figure what is it? I am seeing it increases with subsequent pages in my SPA. – Helium

Not a clue yet, only guess that is the overhead of V8? – Importunity

I have a memory leak in this "dark matter" area that chrome seems to have no idea about, and which the developers saw no reason to explain the meaning of. The only answer to this question is insufficient. How does one debug memory leaks in this gray area?? – Olivares

@TomCrockett you Can check that developers.google.com/web/tools/chrome-devtools/… – Carboxylase

Gray bars indicate objects that were allocated during the timeline, but have since been garbage collected: developers.google.com/web/tools/chrome-devtools/memory-problems/… – Maneuver

Answer 1

Unallocated Memory

---

Total Memory: 20,526 KB

Total Allocated Memory: 1925 + 2939 + 2918 + 494 + 840 = 9,116 KB

Total Unallocated Memory: 20,526 - 9,116 = 11,410 KB

---

11410 / 20526 = ~0.56 (0.56/1) which is the area shaded on the graph.

Total Unallocated Memory / Total Memory = Shaded Area

Doughnut chart showing allocated memory vs unallocated memory

Simony

is this really correct? in my case I have gray(white) area: ~349MB, js arrays in statistics tab says 81MB, but in summary tab, it says "shallow size" of "(array)" is 368MB, then how can be "unallocated space" 349MB? – Shipmaster

Nicely explained, is there any way we can automate the memory profiling like, I want to take the heapsnapshot 3 times~ 4times in a regular interval of time during the application underload. Like any library which supports this. For example you can automate Google Lighthouse through Puppeteer – Chiliad

Answer 2

Total value

In a represented Heap Snapshot Statictics pie chart –

TOTAL is a total memory heap distribution between JavaScript objects and associated DOM nodes. Also I should say that the heap is a memory set aside for dynamic allocation.

According to Chrome Memory Tab article:

Memory leaks occur when a website is using more energy than necessary. Severe memory leaks can even make sites unusable. Since the JavaScript memory leak detector is a part of the Google Chrome browser, you should not hesitate to select a profiling type and analyze your website’s memory usage.

Google Chrome heap snapshot will reveal memory distribution between JavaScript objects and associated DOM nodes. This feature is useful because you will be able to compare different snapshots and find memory leak.

Cottager

Answer 3

I'm trying to understand this for an application I'm working on - WHY? WHY? WHY? are most of the developer tools docs dated 2015 and written for obsolete versions of the tool - so frustrating. But I digress.

First, I believe that assertions that snapshot size is based on live objects are correct - snapshot size is determined by the amount of memory occupied by live objects when the snapshot was taken - there is no unallocated memory or objects eligible for GC in the snapshot.

Second, if you look at the list of named categories in statistics view, they all correspond to plumbing - native JavaScript objects/types and System. None of those categories account for custom objects created by the application or many other items visible in the snapshot's summary view.

So I believe the unnamed (white or grey) segment in the chart is essentially Everything else - including instances of custom objects created by your application. Conclusion based on my investigation described below.

In my case, (made up numbers):

• heap snapshot size of 25 MB.
• Live heap size reported on memory tab is 20 MB
• Total in statistics chart is 25,000 (matches snapshot size)
• total of the listed categories from statistics chart is only 17 MB

I opened More tools / Task manager (right above Developer tools). I discovered that there were actually two tabs listed for my application. The name for the first listed tab matched the tab name for the application I'm running. The name of the second (hidden) tab matched the application URL. Adding the JavaScript memory for both tabs gave me a result of 24,567 - nearly identical to heap snapshot size and statistics Total. I'm counting that as identical given that the Task Manager is a live value and the snapshot is a moment in time. With developer tools open there was an additional tab for the application clearly labeled for use by dev tools.

GC is run before a heap snapshot is exported so it should only include live objects.

The chart's named categories are listed below. Category name is followed by the name of the presumed corresponding type/object found in summary view along with comments on reported size.

It's not clear how the category sizes are calculated. There are differences ranging from small to huge between the sizes listed for each category vs.the presumed corresponding type/object in Summary view. None of the category sizes were an exact match for either shallow or retained size reported in Summary view.

• Code - (compiled code)? - category size within a 100K of summary view shallow size.
• Strings (string)? - category size within a few hundred K of summary view shallow and retained size (same size).
• JS arrays - category size bears no resemblance to summary view shallow or retained size for Array, array, or TypedArray.
• Typed arrays - same comment as JS arrays.
• System objects (system)? - listed size is in between shallow and retained size listed in summary view (too close to call).

As stated in my summary above, the categories are all native JavaScript types/objects or System. None of the listed categories would account for custom objects created by application code or many other items listed in the summary view.

So - again - the unnamed (white or grey) segment of the chart appears to be heap occupied by live objects in the category of Everything else including custom application objects.

It would be awesome if they add a label to clarify that. Even better if you could customize the chart to display segments for specific classes or for biggest retained heap or ???

Fortress

Answer 4

Total it is the total of reachable JavaScript objects which is the current memory for the created objects filled with data for this heap at that time.

In your image you will find 71955 kb on the image and it's the same value of Total

The values before Total it's the value of the data in byte at the initiation point before filling objects with data

for more definitions check chrome memory analysis

Carboxylase

This does not answer the question. – Olivares