Object-oriented JavaScript and Google Maps objects memory management

I have to draw various instances of HeatMaps, Winds and Polylines. Each layer will have one HeatMap, 1000+ Wind arrows and 3000+ Polylines.

The websocket pushes the data into the mapData structure where the data is stored for later manipulation of objects.

Each layer takes around 400MB of memory. Since I have to draw multiple layers of the object, I need to delete and release the memory of each object created.

Here's my deleting function, deleteMapLayer():

this.mapData.deleteMapLayer = function deleteMapLayer() {

for (var index in self.mapData.wind.data) {
    self.mapData.wind.data[index].setMap(null);
}

self.mapData.wind.data = null;
delete self.mapData.wind.data;

self.mapData.wind = null;
delete self.mapData.wind;

self.mapData.alarm.heatMapInstance.setMap(null);

self.mapData.alarm.data = null;
delete self.mapData.alarm.data;

self.mapData.alarm = null;
delete self.mapData.alarm;

for (var index in self.mapData.gasConcentration.data) {
    self.mapData.gasConcentration.data[index]
        .setMap(null);
}

self.mapData.gasConcentration.data = null;
delete self.mapData.gasConcentration.data;

self.mapData.gasConcentration = null;
delete self.mapData.gasConcentration;

};

Theory

Fist of all check this article about memory management, it will help to find leaks if any.

Look closer at this part

Limitation: cycles

There is a limitation when it comes to cycles. In the following example two objects are created and reference one another – thus creating a cycle. They will not get out of the function scope after the function call, so they are effectively useless and could be free'd. However, the reference-counting algorithm considers that since each of both object is referenced at least once and none can be garbage-collected.

Also

Mark-and-sweep algorithm

This algorithm reduces the definition of "an object is not needed anymore" to "an object is unreachable".

This algorithm assumes the knowledge of a set of objects called roots (In JavaScript, the root is the global object). Periodically, the garbage-collector will start from these roots, find all objects that are referenced from these roots, then all objects referenced from these, etc. Starting from the roots, the garbage collector will thus find all reachable objects and collect all non-reachable objects.

This algorithm is better than the previous one since "an object has zero reference" leads to this object being unreachable. The opposite is not true as we have seen with cycles.

Second quote sad that it is enough to be unreachable from so called roots objects to be collected with garbage collection.

So if you follow all recommendation and memory still leaks, than there is one of problems:

• library you are using not release objects

• garbage collector has not started (I mean it has some timeout when to collect objects)

Garbage timeout

Look at dummy example of garbage timeout at fiddle. I'm creating array of 30M elements of int, that are binded to root object - window.

window.data = [];
for (var i = 0; i < 30*1000*1000; i++)
    window.data.push(i);

Then on click, i'm releasing this object

function onDelete(event) { window.data = null; }

But, memory get free only after 3 minutes in my Google Chrome 43.0.2357.125 (64-bit). I was looking in htop, so chrome could free objects instantly, but return to system only after 3 minutes.
Profiling

If everything looks impossible, you can always try experimental way, using profiling. There is awesome article about profiling in Google Chrome also Firefox Developer Tools.

I have applied chrome heap profiles for my example, and it says that data object doesn't exist in window scope any more after pressing "delete" button.

Hopes it will help.

StackExchange Code Review Q#94238, answer score: 4