1. memory leaks in ie understanding the pain

2. wait! what is a memory leak?

3. wait! what is a memory leak? "When a system does not correctly manage its memory allocations, it is said to leak memory. A memory leak is a bug . Symptoms can include reduced performance and failure. " -- Douglas Crockford

4. wait! what is a memory leak?

6. so, it‘s all about garbage collecting?

7. so, it‘s all about garbage collecting?

8. … and how exactly do memory leaks in JScript happen?

9. main cause: Circular References (attention! buzzword!)

10. let‘s code a memory leak!

11. let‘s code a memory leak! // This will approx add 1 MB of memory if executed 1000 times // …each reload! var el = document.createElement("div"); var fnOver = function(e) { el.innerHTML = "Mouse over!"; }; el.onmouseover = fnOver; document.getElementsByTagName("body")[0].appendChild(el); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);

12. where‘s the … uhm … circular whatever?! // This will approx add 1 MB of memory if executed 1000 times // …each reload! var el = document.createElement("div"); var fnOver = function(e) { el.innerHTML = "Mouse over!"; }; el.onmouseover = fnOver; document.getElementsByTagName("body")[0].appendChild(el); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);

13. ah, there it is! // This will approx add 1 MB of memory if executed 1000 times // …each reload! var el = document.createElement("div"); var fnOver = function(e) { el .innerHTML = "Mouse over!"; }; el .onmouseover = fnOver ; document.getElementsByTagName("body")[0].appendChild(el); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);

14. explanation " Memory leaks related to event handlers are, generally speaking, related to enclosures. In other words, attaching a function to an event handler which points back to its element can prevent browsers from garbage-collecting either. " -- Some guy in some forum

15. explanation " Memory leaks related to event handlers are, generally speaking, related to enclosures. In other words, attaching a function to an event handler which points back to its element can prevent browsers from garbage-collecting either. " -- Some guy in some forum Circular Reference!

16. workaround

17. workaround Let‘s build our own garbage collector!

18. the &quot;purger&quot; function purge(d) { var a = d.attributes, i, l, n; if (a) { for (i=0, l=a.length; i<l; i++) { n = a[i].name; if (typeof d[n] === 'function') { d[n] = null; } } } a = d.childNodes; if (a) { for (i=0, l=a.length; i<l; i++) { purge(d.childNodes[i]); } } }

19. what does it do? &quot;The purge function takes a reference to a DOM element as an argument. It loops through the element's attributes. If it finds any functions, it nulls them out. This breaks the cycle, allowing memory to be reclaimed . It will also look at all of the element's descendent elements, and clear out all of their cycles as well &quot; -- http://javascript.crockford.com/memory/leak.html

20. our memory leak: fixed. var el = document.createElement(&quot;div&quot;); var fnOver = function(e) { el.innerHTML = &quot;Mouse over!&quot;; }; el.onmouseover = fnOver; document.getElementsByTagName(&quot;body&quot;)[0].appendChild(el); // Run our garbage collector purge(el); // Removes the element el.parentNode.removeChild(el);

22. memory leak detection Windows Task Manager Drip ( http://tinyurl.com/drip-drip ) JavaScript Memory Leak Detector ( http://tinyurl.com/jmld-tool )

23. references http://msdn.microsoft.com/en-us/library/bb250448.aspx http://stackoverflow.com/questions/491527/javascript-event-handlers-always-increase-browser-memory-usage http://javascript.crockford.com/memory/leak.html

24. thanks Christopher Blum, XING AG