

GC roots are made up of handles that are created (either local or global) when making a reference from native code to a JavaScript object outside of V8. This is the size of memory that is freed once the object itself is deleted along with its dependent objects that were made unreachable from GC roots.

Nevertheless, even a small object can hold a large amount of memory indirectly, by preventing other objects from being disposed of by the automatic garbage collection process. Renderer memory is all memory of the process where an inspected page is rendered: native memory + JS heap memory of the page + JS heap memory of all dedicated workers started by the page.

However, strings and external arrays often have their main storage in renderer memory, exposing only a small wrapper object on the JavaScript heap. Usually, only arrays and strings can have a significant shallow size. Typical JavaScript objects have some memory reserved for their description and for storing immediate values. This is the size of memory that is held by the object itself. Two that stand out are Shallow Size and Retained Size, but what do these represent? # Shallow size When working with the Heap Profiler in DevTools (a tool for investigating memory issues found under "Profiles"), you will likely find yourself looking at a few different columns of information.
