JavaScript Leaks


Published on

Defining and understanding how memory leaks happen in JavaScript.

Published in: Technology

JavaScript Leaks

  1. 1. Javascript memory leaks Christian Boisjoli, SilenceIT
  2. 2. Javascript Memory Leaks <ul><li>What a memory leak is </li></ul><ul><li>How memory leaks occur in Javascript </li></ul><ul><li>How to avoid memory leaks </li></ul><ul><li>Effects of memory leaks </li></ul><ul><li>How much browsers are affected by leaks </li></ul><ul><li>Detection of leaks </li></ul>
  3. 3. What a memory leak is <ul><li>In its simplest form, a memory leak occurs when a program does not release memory it allocated </li></ul><ul><li>Misuse of global scope </li></ul><ul><li>Complex objects not being automatically freed by programming language </li></ul><ul><li>Analogy: renting a movie, not returning it until the time limit is about to end </li></ul>
  4. 4. How memory leaks in Javascript <ul><li>Misuse or accidental use of global scope, e.g. some anonymous functions, undeclared variables </li></ul><ul><li>Closures with DOM elements / event handlers </li></ul><ul><li>Event handlers (mostly with IE) </li></ul><ul><li>Circular references </li></ul><ul><li>Technically, use of objects, not including AJAX </li></ul>
  5. 5. How to avoid memory leaks <ul><li>Use the global scope only when appropriate </li></ul><ul><li>Always declare variables in functions when you use them </li></ul><ul><li>Use a collector to keep references to elements with event handlers </li></ul><ul><li>Avoid closures with event handlers and functions that attach event handlers OR use a global event handler that delegates to listeners </li></ul><ul><li>Avoid dealing with DOM elements in closures OR remember to null them afterwards </li></ul><ul><li>Detach circular references when you are done with them (Try to avoid them altogether) </li></ul>
  6. 6. Effect leaks have <ul><li>Leaks will slow down the browser as the process consumes more memory </li></ul><ul><li>Leaks will slow down the operating system and other processes as the bigger process is given more room </li></ul><ul><li>Some browsers handle leaks better than others (e.g. IE8 uses whole separate processes per tab) </li></ul><ul><li>Often will usually carry the “load” until closed, so this does not only apply to web applications </li></ul>
  7. 7. Incoming graphs <ul><li>Memory usage deltas are important, not sheer quantities </li></ul><ul><li>Firefox 3's stats may be inaccurate, particularly because it never completed the array test </li></ul><ul><li>Some tests are not included because they affected only Internet Explorer, and version 8 (somewhat) fixed these </li></ul><ul><li>A few events were accidentally omitted </li></ul>
  8. 15. Detection of memory leaks <ul><li>Internet Explorer JavaScript Memory Leak Detector (v2): </li></ul><ul><li> </li></ul><ul><li>Mozilla: Performance: Tools </li></ul><ul><li> </li></ul><ul><li>JavaScript Memory Validator </li></ul><ul><li> </li></ul>
  9. 16. More information <ul><li>Memory leak patterns in JavaScript </li></ul><ul><li> </li></ul><ul><li>Understanding and Solving Internet Explorer Leak Patterns </li></ul><ul><li> </li></ul>
  10. 17. Questions?