Download to read offline
Uploaded byKenneth Pirman
Zombies! Memory Management in Javascript
The document discusses memory management in JavaScript, specifically focusing on zombies, which are memory leaks caused by references to DOM nodes that prevent them from being garbage collected. It provides examples of common issues like leaking DOM nodes, intervals, events, and closures along with strategies for avoiding and fixing these leaks. It emphasizes the importance of proper memory management techniques and tools for profiling memory usage in applications.
Zombies! Memory Management in Javascript
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. HowisGarbageCollEcted? Free Memory Garbage HandlingMemory A B C CollectionTriggered!PagePaused!
- 15.
- 16.
- 17. HowisGarbageCollEcted? Free Memory GarbA ☠garbage LiveValuesId’dandGarbageRemoved. livedata NoretainingPath
- 18. HowisGarbageCollEcted? Free Memory Garbage HandlingMemory A valuescopiedbacktofreespace
- 19. HowisGarbageCollEcted? Free Memory Garbage HandlingMemory A C allocationscopiedback,memoryFreeforuse!
- 20.
- 21.
- 22.
- 23.
- 24. LeakyDomNodes 1. var elements= { 2. button: document.getElementById('button'), 3. image: document.getElementById('image'), 4. text: document.getElementById('text') 5. }; 6. 7. function doStuff() { 8. image.src = 'http://some.url/image'; 9. button.click(); 10. console.log(text.innerHTML); 11. // Much more logic 12. } 13. 14. function removeButton() { 15. // The button is a direct child of body. 16. document.body.removeChild(document.getElementById('button')); 17. 18. // At this point, we still have a reference to #button in the global 19. // elements dictionary. In other words, the button element is still in 20. // memory and cannot be collected by the GC. 21. }
- 25.
- 26. LeakyIntervals 1. var someResource= getData(); 2. setInterval(function() { 3. var node = document.getElementById('Node'); 4. if(node) { 5. // Do stuff with node and someResource. 6. node.innerHTML = JSON.stringify(someResource)); 7. } 8. }, 1000);
- 27. LeakyIntervals ‘danglingtimers’ if‘node’isremovedinthefuture,theinterval isunnecessary nodecannotbecollectedbecauseintervalisn’t cleared referencetosomeresourcecannotbecleared either 1. var someResource= getData(); 2. setInterval(function() { 3. var node = document.getElementById('Node'); 4. if(node) { 5. // Do stuff with node and someResource. 6. node.innerHTML = JSON.stringify(someResource)); 7. } 8. }, 1000);
- 28. LeakyEvents-Circularreference 1. var element= document.getElementById('button'); 2. 3. function onClick(event) { 4. element.innerHtml = 'text'; 5. } 6. 7. element.addEventListener('click', onClick); 8. // Do stuff 9. element.removeEventListener('click', onClick); 10. element.parentNode.removeChild(element); 11. // Now when element goes out of scope, 12. // both element and onClick will be collected even in old browsers that don't 13. // handle cycles well.
- 29.
- 30. LeakyClosures 1. var run= function () { 2. var str = new Array(1000000).join('*'); 3. var doSomethingWithStr = function () { 4. if (str === 'something') 5. console.log("str was something"); 6. }; 7. doSomethingWithStr(); 8. var logIt = function () { 9. console.log('interval'); 10. } 11. setInterval(logIt, 100); 12. }; 13. setInterval(run, 1000);
- 31. LeakyClosures YouwouldExpectLogITnottoKeeP stringinmemory,it’snot referenced! Assoonasareferenceisavailableto ANY InsideFunction,itSTAYSIN MEMORY 1. varrun = function () { 2. var str = new Array(1000000).join('*'); 3. var doSomethingWithStr = function () { 4. if (str === 'something') 5. console.log("str was something"); 6. }; 7. doSomethingWithStr(); 8. var logIt = function () { 9. console.log('interval'); 10. } 11. setInterval(logIt, 100); 12. }; 13. setInterval(run, 1000);
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.