Javascript memory leaks Christian Boisjoli, SilenceIT

Javascript Memory Leaks What a memory leak is How memory leaks occur in Javascript How to avoid memory leaks Effects of memory leaks How much browsers are affected by leaks Detection of leaks

What a memory leak is

How memory leaks occur in Javascript

How to avoid memory leaks

Effects of memory leaks

How much browsers are affected by leaks

Detection of leaks

What a memory leak is In its simplest form, a memory leak occurs when a program does not release memory it allocated Misuse of global scope Complex objects not being automatically freed by programming language Analogy: renting a movie, not returning it until the time limit is about to end

In its simplest form, a memory leak occurs when a program does not release memory it allocated

Misuse of global scope

Complex objects not being automatically freed by programming language

Analogy: renting a movie, not returning it until the time limit is about to end

How memory leaks in Javascript Misuse or accidental use of global scope, e.g. some anonymous functions, undeclared variables Closures with DOM elements / event handlers Event handlers (mostly with IE) Circular references Technically, use of objects, not including AJAX

Misuse or accidental use of global scope, e.g. some anonymous functions, undeclared variables

Closures with DOM elements / event handlers

Event handlers (mostly with IE)

Circular references

Technically, use of objects, not including AJAX

How to avoid memory leaks Use the global scope only when appropriate Always declare variables in functions when you use them Use a collector to keep references to elements with event handlers Avoid closures with event handlers and functions that attach event handlers OR use a global event handler that delegates to listeners Avoid dealing with DOM elements in closures OR remember to null them afterwards Detach circular references when you are done with them (Try to avoid them altogether)

Use the global scope only when appropriate

Always declare variables in functions when you use them

Use a collector to keep references to elements with event handlers

Avoid closures with event handlers and functions that attach event handlers OR use a global event handler that delegates to listeners

Avoid dealing with DOM elements in closures OR remember to null them afterwards

Detach circular references when you are done with them (Try to avoid them altogether)

Effect leaks have Leaks will slow down the browser as the process consumes more memory Leaks will slow down the operating system and other processes as the bigger process is given more room Some browsers handle leaks better than others (e.g. IE8 uses whole separate processes per tab) Often will usually carry the “load” until closed, so this does not only apply to web applications

Leaks will slow down the browser as the process consumes more memory

Leaks will slow down the operating system and other processes as the bigger process is given more room

Some browsers handle leaks better than others (e.g. IE8 uses whole separate processes per tab)

Often will usually carry the “load” until closed, so this does not only apply to web applications

Incoming graphs Memory usage deltas are important, not sheer quantities Firefox 3's stats may be inaccurate, particularly because it never completed the array test Some tests are not included because they affected only Internet Explorer, and version 8 (somewhat) fixed these A few events were accidentally omitted

Memory usage deltas are important, not sheer quantities

Firefox 3's stats may be inaccurate, particularly because it never completed the array test

Some tests are not included because they affected only Internet Explorer, and version 8 (somewhat) fixed these

A few events were accidentally omitted

Detection of memory leaks Internet Explorer JavaScript Memory Leak Detector (v2): http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx Mozilla: Performance: Tools http://www.mozilla.org/performance/tools.html JavaScript Memory Validator http://www.softwareverify.com/javascript/memory/feature.html

Internet Explorer JavaScript Memory Leak Detector (v2):

http://blogs.msdn.com/gpde/pages/javascript-memory-leak-detector-v2.aspx

Mozilla: Performance: Tools

http://www.mozilla.org/performance/tools.html

JavaScript Memory Validator

http://www.softwareverify.com/javascript/memory/feature.html

More information Memory leak patterns in JavaScript http://www.ibm.com/developerworks/web/library/wa-memleak/ Understanding and Solving Internet Explorer Leak Patterns http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx

Memory leak patterns in JavaScript

http://www.ibm.com/developerworks/web/library/wa-memleak/

Understanding and Solving Internet Explorer Leak Patterns

http://msdn.microsoft.com/en-us/library/bb250448(VS.85).aspx

Questions?