运行环境:OS X El Capitan 10.11.3
浏览器:Chrome 48.0.2564.116
我创建了10000个DIV元素,并且用了一个数组分别引用了这10000个对象。按理说当我把数组中的元素删除后应该释放对应引用对象的内存。然而并没有,只有当我把元素从DOM树中删除了对应的内存才真正的释放了。请问为什么会出现这种情况
测试创建节点
删除节点
连接节点
取消连接
(function(){
var elemArray = [];
var elemCount = 10000;
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 = "这是第" + 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);
})();
下面是chrome内存分析图片:
创建节点前 此时内存占用3.5M
创建节点后 此时内存占用3.5M
引用节点后 此时内存占用4.0M (注意观察HTMLDivElement)
解除引用后 此时内存占用3.9M
删除元素后 此时内存占用3.5M
补充:
我的操作步骤就是图片的顺序来的
从内存占用量来看,也是在删除元素以后内存用量才降了下来