memory leaks in ieunderstanding 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

Problem: The DOM garbage collector doesn‘t know much about JScript and its references!

which versions are affected?

• All versions below IE 8• No known memory leak in version 8 (yes, I googled it)

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 using a circular reference!

// 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 memoryel.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 memoryel.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 memoryel.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 "purger"

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?

"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 "

-- http://javascript.crockford.com/memory/leak.html

our memory leak: fixed.

var el = document.createElement("div");var fnOver = function(e) {    el.innerHTML = "Mouse over!";};

el.onmouseover = fnOver;

document.getElementsByTagName("body")[0].appendChild(el);

// Run our garbage collectorpurge(el);

// Removes the elementel.parentNode.removeChild(el);

ajax libraries and memory leaks

• Ajax libraries reduce the pain• Element storage and event clearing onunload• Nevertheless the Prototype Library contains several critical memory leaks – Patches are available

Always check bug trackers and core groupsbefore 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)

more informations and leaks

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