Google Chrome Heap Snapshots (closure), (array), (system), (compiled code) under programmer control?

Question

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'?

Answer 1

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.

Answer 2

A closure is a function that is able to refer to data that was declared outside of its immediate scope.

Here is an example:

var closure = (function() {
   var a = "some data";
   var b = "something else...";
   return function Closure() {
      // this function retains references to a and b.
   }
})();

The most common way that you'd end up with closures in web development is through attaching event listeners to dom nodes.

ex:

$.ready(function() {
   var $elems = $("selector");
   var tools = new Tools();
   $elems.mousedown(function() { // <-- this has created a closure
      // We can refer to $elems and tools in here
      // and so as long as this function is held on to so are those variables to which
      // it has access
   });
});

You verify this and actually see the (closure) count go up if you

1. pop open chrome
2. take a heap dump

3. run: function DistinctName() {} function DistinctName2() {}

   in the javascript console

4. take another heap dump

5. select "comparison" from the heap dump options at the very bottom.

You'll see that DistinctName and DistinctName2 show up as new closures under the (closure) category.

v8 has a "JIT" compiler so I'd assume (compiled) refers to JIT compiled source.

I can only guess on (array) and (system).