运行环境：OS X El Capitan 10.11.3
浏览器：Chrome 48.0.2564.116
我创建了10000个p元素，并且用了一个数组分别引用了这10000个对象。按理说当我把数组中的元素删除后应该释放对应引用对象的内存。然而并没有，只有当我把元素从DOM树中删除了对应的内存才真正的释放了。请问为什么会出现这种情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>
<button id="create" >创建节点</button>
<button id="clear" >删除节点</button>
<button id="link" >连接节点</button>
<button id="unlink" >取消连接</button>
<p id="zone"></p>
<script>
(function(){
var elemArray = [];
var elemCount = 10000;
var create = function(){
var i = 0;
var zone = document.getElementById("zone");
for(;i<=elemCount;i++){
var p = document.createElement("p");
p.id = "p" + i;
p.innerHTML = "这是第" + i + "个p";
zone.appendChild(p);
}
};
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("p" + 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);
})();
</script>
</body>
</html>创建节点前 此时内存占用3.5M
创建节点后 此时内存占用3.5M
引用节点后 此时内存占用4.0M (注意观察HTMLpElement)
解除引用后 此时内存占用3.9M
删除元素后 此时内存占用3.5M
补充：
我的操作步骤就是图片的顺序来的
从内存占用量来看，也是在删除元素以后内存用量才降了下来
一个节点被数组和节点树同时引用，释放了数组中的引用肯定不会释放节点所占的内存啊，因为这时候还有节点树的引用没有释放呢