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 memo...
wait! what is a memory leak?
why internet explorer? <ul><li>IE has 2 separate garbage collectors </li></ul><ul><li>One for JScript and the other one fo...
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...
where‘s the … uhm … circular whatever?! // This will approx add 1 MB of memory if executed 1000 times // …each reload! var...
ah, there it is! // This will approx add 1 MB of memory if executed 1000 times // …each reload! var el = document.createEl...
explanation &quot; Memory leaks related to event handlers are, generally speaking, related to enclosures. In other words, ...
explanation &quot; Memory leaks related to event handlers are, generally speaking, related to enclosures. In other words, ...
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++) {  ...
what does it do? &quot;The purge function takes a reference to a DOM element as an argument. It loops through the element'...
our memory leak: fixed. var el = document.createElement(&quot;div&quot;); var fnOver = function(e) {     el.innerHTML = &q...
ajax libraries and memory leaks <ul><li>Ajax libraries reduce the pain </li></ul><ul><li>Element storage and event clearin...
memory leak detection Windows Task Manager Drip ( http://tinyurl.com/drip-drip ) JavaScript Memory Leak Detector ( http://...
references http://msdn.microsoft.com/en-us/library/bb250448.aspx http://stackoverflow.com/questions/491527/javascript-even...
thanks Christopher Blum, XING AG
Upcoming SlideShare
Loading in …5
×

Memory Leaks In Internet Explorer

6,670 views
6,452 views

Published on

Published in: Education, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,670
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
54
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Memory Leaks In Internet Explorer

  1. 1. memory leaks in ie understanding the pain
  2. 2. wait! what is a memory leak?
  3. 3. wait! what is a memory leak? &quot;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. &quot; -- Douglas Crockford
  4. 4. wait! what is a memory leak?
  5. 5. why internet explorer? <ul><li>IE has 2 separate garbage collectors </li></ul><ul><li>One for JScript and the other one for the DOM </li></ul><ul><li>The DOM garbage collector </li></ul><ul><li>doesn‘t know much about JScript and its quirks! </li></ul>
  6. 6. so, it‘s all about garbage collecting?
  7. 7. so, it‘s all about garbage collecting?
  8. 8. … and how exactly do memory leaks in JScript happen?
  9. 9. main cause: Circular References (attention! buzzword!)
  10. 10. let‘s code a memory leak!
  11. 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(&quot;div&quot;); var fnOver = function(e) {     el.innerHTML = &quot;Mouse over!&quot;; }; el.onmouseover = fnOver; document.getElementsByTagName(&quot;body&quot;)[0].appendChild(el); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);
  12. 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(&quot;div&quot;); var fnOver = function(e) {     el.innerHTML = &quot;Mouse over!&quot;; }; el.onmouseover = fnOver; document.getElementsByTagName(&quot;body&quot;)[0].appendChild(el); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);
  13. 13. ah, there it is! // This will approx add 1 MB of memory if executed 1000 times // …each reload! 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); // Removes the element, but it‘s still in the memory el.parentNode.removeChild(el);
  14. 14. explanation &quot; 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. &quot; -- Some guy in some forum
  15. 15. explanation &quot; 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. &quot; -- Some guy in some forum Circular Reference!
  16. 16. workaround
  17. 17. workaround Let‘s build our own garbage collector!
  18. 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. 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. 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);
  21. 21. ajax libraries and memory leaks <ul><li>Ajax libraries reduce the pain </li></ul><ul><li>Element storage and event clearing onunload </li></ul><ul><li>Nevertheless Prototype contains several critical memory leaks – Patches are available </li></ul><ul><li>Always check bug trackers and communities </li></ul><ul><li>before deciding which ajax library to use. </li></ul>
  22. 22. memory leak detection Windows Task Manager Drip ( http://tinyurl.com/drip-drip ) JavaScript Memory Leak Detector ( http://tinyurl.com/jmld-tool )
  23. 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. 24. thanks Christopher Blum, XING AG

×