Demystifying JavaScript Memory Management

#TEFCON2014

Javier López Pardo - @javilp

http://jalopez.github.io/js-memory-management

Key questions

Tip: We will use Chrome Dev Tools. They are awesome!

What is this all about?

• Understand JS memory allocation and GC
• Find and kill memory leaks
• Advanced memory techniques

Understanding memory management

Basic concepts

• Heap memory
• Garbage collection
• Memory leak
• Memory graph

JavaScript Memory Graph. Allocating memory

// window
var a = 3;
					    

var myObject = {
    prop1: a, // It's a copy
    prop2: 'A string'
};
					    

var myArray = [
    myObject, // By reference
    new Date()
];
					    

Removing a value

myArray = null;
					    

myObject = null;
					    

Garbage collection

myArray = null;
					    

myObject.prop1 = null;
// delete myObj.prop1;
					    

myObject = null;
					    

When can the GC collect a node?

• Event listeners when they are unbounded

What is a memory leak?

• Circular references in objects/functions
• "Global" variables (lists, etc.) never emptied
• DOM nodes not removed from JS objects

Finding and killing memory leaks

Show me the code!

What's wrong with this?

function testLeak() {
    myArray = [];

    for (var i = 0; i < 1000000; i++) {
        myArray.push(i.toString());
    }
    return myArray[0];
}

function runTest() {
    testLeak();
}
                    

function testLeak() {
    var myArray = []; // Don't forget the var here

    for (var i = 0; i < 1000000; i++) {
        myArray.push(i.toString());
    }
    return myArray[0];
}

function runTest() {
    testLeak();
}
                    

DON'T USE GLOBAL VARIABLES!

[show in browser]

Finding the root of a memory leak

The two steps technique

Understanding the results

• Distance: number of jumps from the root (window)
• Shallow size: size of the object itself
• Retained size: size of the object plus the objects it is referencing
• Retainers: list of objects retaining this object/node
  • Yellow Node has a JavaScript reference
  • Red Node referenced by a yellow node

Finding the root of a memory leak

Record heap allocations

And what about Node.js?

Use heapdump

var heapdump = require('heapdump');

heapdump.writeSnapshot('/tmp/step1.heapsnapshot');
executeLeakyAction();
heapdump.writeSnapshot('/tmp/step2.heapsnapshot');
                    

Load *.heapsnapshot in Chrome Profile

Common memory leaks

1. Global variables

Not only global, but also long-live objects:

• Module pattern
• Memoized functions
• Caches

2. DOM Leaks

var ToDoList = function() {
    this._items = [];
    this._itemIndex = 0;

    this._mainNode = document.getElementById('main');
};

ToDoList.prototype.addItem = function() {
    var li = document.createElement('li');
    li.innerHTML = 'Item ' + this._itemIndex++;
    this._items.push(li);

    this._mainNode.appendChild(li);
};

ToDoList.prototype.removeAll = function() {
    for (var i = 0, len = this._items.length; i < len; i++) {
        this._mainNode.removeChild(this._items[i]);
    }
};
                    

[show in browser]

Remove all references to DOM nodes

3. Closures

function testLeak() {
    var myArray = [],
        mySecondArray = [1, 2, 3, 4],
        anotherObject = {a: 'b'};

    for (var i = 0; i < 1000000; i++) {
        myArray.push(i.toString());
    }
    return function leakClosure() {
        return myArray;
    };
}

var closure;

function createMemory() {
    closure = testLeak();
}
function freeMemory() {
    closure = null;
}
                    

[show in browser]

Closures retain scope variables

3.1 Event listeners

function registerEvent() {
    var text = new Array(10000000).join('x')
    var node = document.getElementById('div');

    node.addEventListener('click', function() {
        return text;
    });
};
                    

Remove event handlers when no longer needed

3.2. Closures inside objects / Timers

var object;

function createMemory() {
    object = {
        prop: new Array(10000000).join('x'),
        run: function() {
            var that = this;

            setTimeout(function() {
                that.run();
            }, 10000);
        }
    };
    object.run();
}

function freeMemory() {
    object = null;
}
                    

[show in browser]

Take care of "that" in closure scope.

Advanced memory management

v8 Hidden classes. Fast objects

• Chrome "compile" JS and create faster hidden classes that represent app objects
• When the structure of an object is changed by deleting properties, the object becomes slow, and takes much more memory

var fastObject = {
    prop1: 'string',
    prop2: new Date()
};
// Fast operation
fastObject.prop1 = null;
                        

var slowObject = {
    prop1: 'string',
    prop2: new Date()
};
// Slow operation
delete slowObject.prop1;
                        

See it in action

Automatizing memory tests. Logging your memory

Use Chrome performance.memory API

• jsHeapSizeLimit: maximum heap size
• usedJSHeapSize: current memory allocated
• totalJSHeapSize: allocated heap, including free space

Enable memory logging with --enable-precise-memory-info

Tip: Automatize your memory tests (Selenium...)

Homework

• ES6 WeakMaps
• V8 Young generation objects vs. Old generation
• JS execution loop, DOM layout and reflows

Useful tips when developing a big JS application

• Don't rely too much on Internet libraries
• Don't keep DOM references in code when don't need them
• The less global state, the better
• Take care about scope
• Use data caches
  • ...but take care of the amount of memory (MRU caching)

References

• JavaScript Memory Management Masterclass
• Writing Fast, Memory efficient JavaScript
• Taming the unicorn. Easing JavaScript memory profiling in DevTools

Thank you!

Questions?