My Private Leaking Investigation

How do I know I have a problem?

I get this when playing around with the application

How do I know I have a problem?

Application frequently halts for several seconds

How do I know I have a problem?

Boss instructs you to check for memory leaks

Theory

Objects sizes

• Shallow size
  self obtained size
• Retained size
  Self size + Size of all obtained objects

Objects retaining tree

• Trees = Nodes (objects) + Edges (properties)
• DOM trees - reachable from the document root
• Detached DOM trees - released all references to the document

What are GC roots?

• Global object
• Document object
• Other GC roots

• Released objects - eligable to be GC-ed
• No control from code on the GC process

Detecting a problem in memory management

1. Test App with a clean environment
2. Activate the timeline recording
3. Repeat a suspected scenario back and forth
4. Force GC
5. Wait and stop recording
6. analyze resulted graph

What is a clean environment?

• Open browser from the command line with --nocranckshaft and --noopt flags on
• Open browser in incognito mode to disable browser extensions that may add references: Batarang to name one
• Run App in a mode that disables console logs, as they are keeping references to the code they inspect
• Run App in production mode to simulate real environment

Timeline graph patterns

Some notes on timeline recording

1. GC has it's own strategies. You may want to leave the recording on idle state for few minutes to ensure GC
2. Run App in production mode to simulate real environment

Detecting memory leaks causes

1. Test App with a clean environment
2. Choose a suspected scenraio
3. Take a heap snapshot
4. Make the steps of the scenario
5. Take another snapshot
6. Make the scenario reverse actions
7. Take a last snapshot
8. Switch to comparison mode and compare first and last snapshots
9. Filter results to show detached DOM trees
10. Analyze results

Analyzing results

• Retaining tree is a reverse pyramid of references
• Entries with red background - Detached elements
• Entries with yellow background - objects with a reference to GC root
• Distance column - distance to root

Fixing and validating

• Recognize your place in code using clues from the retaining tree. Issue should be somewhere between the red and the yellow entries
• Review suspected code
• Release DOM tree in code
• Repeat detection steps to see if problem solved

Some notes on profiling

1. Each snapshot starts with a garbage collecting. No need to force it
2. Name closure functions. They will help you get around the retaining tree
   

Record heap allocation

Memory snapshots over time

Memory leaks in Angular.JS directives

What we should do when scope has to die

Directives - release DOM trees

• Release any reference to detached DOM trees
• Use scope $destroy event, prior to scope destruction

							

return function alCaponeLink(scope, element, attrs) {
    (function perform100Robberies() {
        var div,
            i;

        for(i = 0; i < 1000; i+=1) {
            div = $window.document.createElement('div');
            $window.alCaponeTreasure.push(div);
        }
    })();

    scope.$on('$destroy', function findCaponeTreasure() {
        $window.alCaponeTreasure = null; // <- This fixes the leak
    });
};
							
						

Directives - destroy third party plugins

• Use plugin API to remove/destroy plugin
• Fixed jQueryUI bug - datepicker_instActive

							
function timeBombDirective () {
    return function timeBombLnk(scope, element, attrs) {
        (function setTimeBomb() {
            element.datepicker();
        })();

        scope.$on('$destroy', function neutralizeTimeBomb() {
            element.datepicker('destroy'); // <- This fixes the leak
        });
    };
}
							
						

Directives - stop any running interval

• Release setInterval on $destroy event
• Manual destruction of the interval still needed with $interval

							
function tedBundyDirective ($interval) {
    var Body = function () { 
        // define person 
    };

    return function tedBundyLink(scope, element, attrs) {
        var bodies = [],
            killingInterval = $interval(function kill() {
                bodies.push(new Body());
            }, 50);

        scope.$on('$destroy', function arrestTedBundy() {
            $interval.cancel(killingInterval); // <- This fixes the leak
        })
    };
}