memory leaks in internet explorer
DESCRIPTION
TRANSCRIPT
![Page 1: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/1.jpg)
memory leaks in ieunderstanding the pain
![Page 2: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/2.jpg)
wait! what is a memory leak?
![Page 3: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/3.jpg)
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
![Page 4: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/4.jpg)
wait! what is a memory leak?
![Page 5: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/5.jpg)
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!
![Page 6: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/6.jpg)
so, it‘s all about garbage collecting?
![Page 7: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/7.jpg)
so, it‘s all about garbage collecting?
![Page 8: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/8.jpg)
… and how exactly do memory leaks in JScript happen?
![Page 9: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/9.jpg)
main cause:
Circular References(attention! buzzword!)
![Page 10: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/10.jpg)
let‘s code a memory leak!
![Page 11: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/11.jpg)
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 memoryel.parentNode.removeChild(el);
![Page 12: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/12.jpg)
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);
![Page 13: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/13.jpg)
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);
![Page 14: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/14.jpg)
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
![Page 15: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/15.jpg)
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!
![Page 16: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/16.jpg)
workaround
![Page 17: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/17.jpg)
workaround
Let‘s build our own garbage collector!
![Page 18: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/18.jpg)
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]); } }}
![Page 19: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/19.jpg)
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
![Page 20: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/20.jpg)
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);
![Page 21: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/21.jpg)
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 communitiesbefore deciding which ajax library to use.
![Page 22: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/22.jpg)
memory leak detection
Windows Task Manager
Drip (http://tinyurl.com/drip-drip)
JavaScript Memory Leak Detector(http://tinyurl.com/jmld-tool)
![Page 23: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/23.jpg)
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
![Page 24: Memory Leaks In Internet Explorer](https://reader033.vdocument.in/reader033/viewer/2022061220/5484f4bab4af9ffd198b4687/html5/thumbnails/24.jpg)
thanks
Christopher Blum, XING AG