Why doesn't memory usage increase when I create 10,000 items?

Question

Memory usage does not increase when I create 10,000 items. But when I reference these 10,000 items, memory usage increases from 3.5M to 4.0M. And usage decreases by 0.1M when I destroy the link, and deleting elements reduces it by 0.4M.

Here are my questions:

• Why doesn't memory usage increase when I create 10,000 items?
• Why does memory usage increase significantly when I refer to these 10,000 items?
• Why is usage reduced marginally when links are destroyed and element removal is clearly reduced?

OS: El Capitan 10.11.3 Browser: Chrome 48.0.2564.116 (64-bit)

After creating items (using 3.5M memory)

After creating links (4.0M memory usage)

(function(){ var elemArray = []; var elemCount = 10000; //create 10000 elements and append to the dom tree var create = function(){ var i = 0; var zone = document.getElementById("zone"); for(;i<=elemCount;i++){ var div = document.createElement("div"); div.id = "div" + i; div.innerHTML = "the " + i + " div"; zone.appendChild(div); } }; document.getElementById("create").addEventListener("click",create,false); var clear = function(){ var zone = document.getElementById("zone"); zone.innerHTML = ""; }; document.getElementById("clear").addEventListener("click",clear,false); var link = function(){ var i = 0; for(;i<=elemCount;i++){ elemArray[i] = document.getElementById("div" + i); } }; document.getElementById("link").addEventListener("click",link,false); var unlink = function(){ if(elemArray.length > 0) elemArray.splice(0,elemArray.length); } document.getElementById("unlink").addEventListener("click",unlink,false); })(); 

 <button id="create" >create 10000 elements</button> <button id="clear" >delete 10000 elements</button> <button id="link" >reference 10000 elements</button> <button id="unlink" >destroy reference</button> <div id="zone"></div> 

Answer 1

Everything works as expected.

OP code adds elements to the DOM, which uses a bunch of C ++ memory. Then, when Javascript is attached to these elements, a wrapper object is created that uses Javascript memory. And this memory usage appears in Chrome's memory profilers .

Interestingly, if you add a name attribute for each new div, then there is an immediate memory burst of 0.5 MB. Just adding the identifier alone (for example, OP code) does not create such a splash (with div). This can be tested using the code snippet below and the Chrome profiler.

Here is a previous SO question that might explain this better:

Do DOM tree elements with identifiers become global variables?

Test code

 var LIMIT = 10000, zone = document.getElementById('zone'), count = document.getElementById('count'); window.b1.onclick = function() { var i; for (i = 0; i < LIMIT; i++) { zone.appendChild(document.createElement('div')); } show(); } window.b2.onclick = function() { var i, e; for (i = 0; i < LIMIT; i++) { e = document.createElement('div'); e.id = 'id' + i; zone.appendChild(e); } show(); } window.b3.onclick = function() { var i, e; for (i = 0; i < LIMIT; i++) { e = document.createElement('div'); e.name = 'na' + i; zone.appendChild(e); } show(); } window.b4.onclick = function() { var i, e; for (i = 0; i < LIMIT; i++) { e = document.createElement('div'); e.id = 'id' + i; e.name = 'na' + i; zone.appendChild(e); } show(); } window.b5.onclick = function() { zone.innerHTML = ''; show(); } function show( ) { var e = zone.getElementsByTagName('div'); count.innerHTML = 'total elements = ' + (e ? e.length: '0'); } 

 button { width: 8em; } 

 <div>Memory Test: <span id="count"></span></div> <button id="b1">none</button> <button id="b2">with id</button> <button id="b3">with name</button> <button id="b4">with name + id</button> <button id="b5">clear</button> <div id="zone"></div>