Memory Leaks In Internet Explorer

5,702 views

Published on

Published in: Education, Technology
2 Comments
5 Likes
Statistics
Notes
  • Good slides but i was searching for the answers like to increase heap size we do -Xms512m -Xmx1024m. Similarly i have code in production and client is facing memory leak i want to provide some fix which is similar to heap size. So that my memory leakage will reduce and performance will increase.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice show. Do you like linux? ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,702
On SlideShare
0
From Embeds
0
Number of Embeds
216
Actions
Shares
0
Downloads
52
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Memory Leaks In Internet Explorer

  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?
  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>Problem: The DOM garbage collector </li></ul><ul><li>doesn‘t know much about JScript and its references! </li></ul>
  6. which versions are affected? <ul><li>All versions below IE 8 </li></ul><ul><li>No known memory leak in version 8 (yes, I googled it) </li></ul>
  7. so, it‘s all about garbage collecting?
  8. so, it‘s all about garbage collecting?
  9. … and how exactly do memory leaks in JScript happen?
  10. main cause: Circular References (attention! buzzword!)
  11. 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(&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. 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. 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. 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. 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. 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);
  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 the Prototype Library contains several critical memory leaks – Patches are available </li></ul><ul><li>Always check bug trackers and core groups </li></ul><ul><li>before deciding which ajax library to use. </li></ul>
  22. memory leak detection Windows Task Manager Drip ( http://tinyurl.com/drip-drip ) JavaScript Memory Leak Detector ( http://tinyurl.com/jmld-tool )
  23. 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
  24. thanks Christopher Blum

×