Google Chrome Heap Snapshots (closure), (array), (system), (compiled code) under programmer control?
google-chrome-devtools, javascript, memory
Solution
Regarding your question:
Q: What exactly is (closure), (array), (compiled code), (system), etc.?
This snippet from an article by Addy Osmani may help:
(global property) – intermediate objects between a global object (like 'window') and an object referenced by it. If an object is created using a constructor Person and is held by a global object, the retaining path would look like [global] > (global property) > Person. This contrasts with the norm, where objects directly reference each other. We have intermediate objects for performance reasons. Globals are modified regularly and property access optimisations do a good job for non-global objects aren't applicable for globals.
(roots) – The root entries in the retaining tree view are the entities that have references to the selected object. These can also be references created by the engine for its own purposes. The engine has caches which reference objects, but all such references are weak and won't prevent an object from being collected given that there are no truly strong references.
(closure) – a count of references to a group of objects through function closures
(array, string, number, regexp) – a list of object types with properties which reference an Array, String, Number or regular expression
(compiled code) – simply, everything related to compiled code. Script is similar to a function but corresponds to a body. SharedFunctionInfos (SFI) are objects standing between functions and compiled code. Functions are usually have a context, while SFIs do not.
HTMLDivElement, HTMLAnchorElement, DocumentFragment etc – references to elements or document objects of a particular type referenced by your code.
The full article has many other valuable nuggets of information regarding heap profiling: http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools
And your other question:
Q: Also, what is the difference between (array) and 'Array'?
Based on Addy's description, my interpretation is as such: (array) is an aggregate of objects (of any type) whom have a property that reference an actual Array. In contrast, Array is a list of actual Array objects.
Problem
I have noticed that the properties I mentioned in the title climb significantly in my page (especially '(closure)'). Is this OS and/or browser controlled? Can I do anything about it? What exactly is (closure), (array), (compiled code), (system), etc.? Also, what is the difference between (array) and 'Array'?