Download to read offline
![EVIL DOM var detached = null; function fill() { for (var i = 0; i < 25; ++i) { var div = document.createElement('div'); div.data = new Array(10000); for (var j = 0, l = div.data.length; j < l; ++j) div.data[j] = j.toString(); detached.appendChild(div); } } function start() { var p = document.getElementById("p"); detached = document.createElement("div"); p.appendChild(detached); p.removeChild(detached); fill(); } start();](https://image.slidesharecdn.com/thereisgarbageinourcode-160328130708/75/There-is-garbage-in-our-code-Talks-by-Softbinator-62-2048.jpg)
![EVIL CLOSURES // catalogData is a large object function getActiveItems(catalogData) { var activeItems = processCatalogData(catalogData); function getItem(idx) { return activeItems[idx]; } return getItem; }](https://image.slidesharecdn.com/thereisgarbageinourcode-160328130708/75/There-is-garbage-in-our-code-Talks-by-Softbinator-66-2048.jpg)
![BETTER CLOSURES // catalogData is a large object function getActiveItems(catalogData) { var activeItems = processCatalogData(catalogData); function getItem(idx) { return activeItems[idx]; } catalogData = null; return getItem; }](https://image.slidesharecdn.com/thereisgarbageinourcode-160328130708/75/There-is-garbage-in-our-code-Talks-by-Softbinator-67-2048.jpg)
Uploaded byAdrian Oprea
There is garbage in our code - Talks by Softbinator
The document discusses memory management in JavaScript, focusing on the garbage collection process and its inefficiencies. It explains different garbage collection algorithms, such as reference counting and mark-and-sweep, detailing their implementations in modern environments like the V8 engine. The author provides examples of common memory leaks and best practices to optimize garbage collection in JavaScript code.
There is garbage in our code - Talks by Softbinator
- 1. There's garbage in ourcode Talks by Softbinator Adrian Oprea / @opreaadrian
- 2. I am • Softwareover-engineer • Deprived of sleep • In love with JavaScript • Docker fanboy :)
- 3.
- 4.
- 5. THE ACT OFMANAGING MEMORY AT THE SYSTEM LEVEL
- 6. DYNAMIC ALLOCATION /DE- ALLOCATION
- 7. MEMORY IS FREEDFOR REUSE WHEN NO LONGER NEEDED
- 8.
- 9. ALL HIGH-LEVEL PROGRAMMINGLANGUAGES IMPLEMENT SOME FORM OF AUTOMATIC MEMORY MANAGEMENT
- 10.
- 11. JAVA JAVASCRIPT .NETC++ GARBAGE COLLECTOR
- 12.
- 13.
- 14.
- 15. MEMORY • Is allocatedat runtime • Is freed whenever a certain threshold is reached
- 16. THE GARBAGE COLLECTOR KICKSIN WHEN YOU LEAST EXPECT
- 17.
- 18.
- 19. YOU HAVE NO CONTROL OVERTHE COLLECTION PROCESS
- 20.
- 21.
- 22. BORED? LET'S LOOKAT 3 LINES OF CODE
- 24.
- 25.
- 26.
- 27. REFERENCE COUNTING AVAILABLE IN PREVIOUSGENERATION BROWSERS (IE8 and below)
- 28. REFERENCE COUNTING AN OBJECT ISELIGIBLE FOR COLLECTION IF THERE ARE 0 REFERENCES POINTING TO IT
- 29. REFERENCE COUNTING THIS IS ANAIVE IMPLEMENTATION.
- 30.
- 31. REFERENCE COUNTING SHIPS WITH ALLMODERN BROWSERS, SINCE 2012
- 32. REFERENCE COUNTING HAS NO ISSUECOLLECTING CIRCULAR DEPENDENCIES(CYCLES)
- 33. REFERENCE COUNTING INTRODUCES THE NOTIONOF ROOT OBJECTS
- 35. WHERE IS THEGARBAGE?
- 37.
- 38. WHAT IS V8? JAVASCRIPT VIRTUALMACHINE NODE.JS GOOGLE'S THE MONSTER BEHIND FASTEST JAVASCRIPTMAINSTREAM VIRTUAL MACHINE
- 39.
- 40.
- 41.
- 42. V8 SPLITS OBJECTSIN TWO GENERATIONS
- 43.
- 44. "FROM" and "TO"spaces
- 45.
- 46.
- 47.
- 49.
- 50.
- 51.
- 52. IMPLICITLY TRIGGERS A YOUNGGENERATION COLLECTION
- 53.
- 54.
- 55.
- 56. MARKED OBJECTS GET MOVEDTO THE START OF THE HEAP - COPMACT
- 57.
- 59.
- 61.
- 62. EVIL DOM var detached= null; function fill() { for (var i = 0; i < 25; ++i) { var div = document.createElement('div'); div.data = new Array(10000); for (var j = 0, l = div.data.length; j < l; ++j) div.data[j] = j.toString(); detached.appendChild(div); } } function start() { var p = document.getElementById("p"); detached = document.createElement("div"); p.appendChild(detached); p.removeChild(detached); fill(); } start();
- 63. BETTER DOM var detached= null; function fill() { do stuff ... } function start() { var p = document.getElementById("p"); detached = document.createElement("div"); p.appendChild(detached); p.removeChild(detached); // solution: EXPLICITLY SET TO NULL detached = null; fill(); } start();
- 64. EVIL XHR function getText(url,callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { callback(xhr.responseText); } xhr.open('get', url, true); xhr.send(null); }
- 65. BETTER XHR function getText(url,callback) { var xhr = new XMLHttpRequest(); xhr.onload = function() { callback(xhr.responseText); xhr = null; } xhr.open('get', url, true); xhr.send(null); }
- 66. EVIL CLOSURES // catalogDatais a large object function getActiveItems(catalogData) { var activeItems = processCatalogData(catalogData); function getItem(idx) { return activeItems[idx]; } return getItem; }
- 67. BETTER CLOSURES // catalogDatais a large object function getActiveItems(catalogData) { var activeItems = processCatalogData(catalogData); function getItem(idx) { return activeItems[idx]; } catalogData = null; return getItem; }
- 68.
- 69. USE WHAT YOUDECLARE
- 70.
- 71. USE THE deleteOPERATOR
- 72.
- 73. USE SOME DEVELOPERTOOLS!
- 75. QUESTIONS Adrian Oprea /@opreaadrian / codesi.nz