memory leaks in ie understanding the pain

wait! what is a memory leak?

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

wait! what is a memory leak?

why internet explorer? IE has 2 separate garbage collectors One for JScript and the other one for the DOM The DOM garbage collector doesn‘t know much about JScript and its quirks!

IE has 2 separate garbage collectors

One for JScript and the other one for the DOM

The DOM garbage collector

doesn‘t know much about JScript and its quirks!

so, it‘s all about garbage collecting?

so, it‘s all about garbage collecting?

… and how exactly do memory leaks in JScript happen?

main cause: Circular References (attention! buzzword!)

let‘s code a memory leak!

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);

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);

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);

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

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!

workaround

workaround Let‘s build our own garbage collector!

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]); } } }

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

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);

ajax libraries and memory leaks Ajax libraries reduce the pain Element storage and event clearing onunload Nevertheless Prototype contains several critical memory leaks – Patches are available Always check bug trackers and communities before deciding which ajax library to use.

Ajax libraries reduce the pain

Element storage and event clearing onunload

Nevertheless Prototype contains several critical memory leaks – Patches are available

Always check bug trackers and communities

before deciding which ajax library to use.

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

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

thanks Christopher Blum, XING AG