javascript - 为什么当我创建 10,000 个元素时，内存使用量没有增长？

Question

当我创建 10,000 个元素时，内存使用量没有增加。但是当我引用这 10,000 个元素时，内存使用量从 3.5M 增加到 4.0M。当我销毁引用时使用量减少 0.1M，同时删除元素使其减少 0.4M。

这是我的问题:

1. 为什么当我创建 10,000 个元素时内存使用量没有增长？
2. 当我引用这 10,000 个元素时，为什么内存使用量会显着增加？
3. 为什么当引用被销毁时使用率仅略微降低，而删除元素时使用率明显降低？

操作系统:El Capitan 10.11.3浏览器:Chrome 48.0.2564.116(64 位)

创建元素后(3.5M内存占用)

引用后(4.0M内存占用)

(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

一切似乎都按预期工作。

OP 的代码将元素添加到使用 C++ 内存堆的 DOM。然后，当 Javascript 附加到这些元素时，将创建一个使用 Javascript 内存的包装器对象。然后该内存使用情况显示在 Chrome memory profiler 中.

有趣的是，如果您向每个新的 div 添加一个名称属性，那么内存使用量会立即增加 0.5mb。仅添加一个 id(如 OP 的代码)不会产生该峰值(带有 div)。这可以使用下面的代码片段和 Chrome 分析器进行测试。

这是一个可能更好地解释它的以前的 SO 问题:

Do DOM tree elements with ids become global variables?

测试代码

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>