Question

当我创建10,000个元素时，内存使用量不会增长。但是当我引用这些10,000个元素时，内存使用量从3.5M增加到4.0M。当我破坏参考时使用量减少0.1M，而删除元素则减少0.4M。

以下是我的问题：

当我创建10,000个元素时，为什么内存使用量不会增长？
当我引用这10,000个元素时，为什么内存使用会显着增长？
为什么在销毁引用时使用量只会略有下降而删除元素会明显减少？

操作系统： El Capitan 10.11.3 浏览器： Chrome 48.0.2564.116（64位）

创建元素后（3.5M内存使用量）

参考后（4.0M内存使用情况）

＆＃13;

(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);
})();

＆＃13;

<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>

＆＃13;

Answer 1

所有内容似乎都按预期工作。

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

有趣的是，如果你为每个新div添加一个name属性，那么就会立即使用0.5mb的内存峰值。只添加一个id（就像OP的代码一样）不会产生尖峰（带有div）。这可以使用下面的代码段和Chrome分析器进行测试。

这是以前的SO问题，可以更好地解释它：

Do DOM tree elements with ids become global variables?

测试代码

＆＃13;

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');
}

＆＃13;

button {
  width: 8em;
}

＆＃13;

<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>

＆＃13;

当我创建10,000个元素时，为什么内存使用量不会增长？

1 个答案: