创建/追加html元素(浏览器内存)

时间:2016-02-13 00:45:16

标签: javascript html dom memory

当我appendChild()dom[0]时,您认为它会移动dom[1]dom[2],但实际上它会复制/复制dom[0]下面的元素,因为它们仍然是实际dom数组的元素。

// JS

var dom = [];
var element = new Array("div","p","h1");
for(var i=0; i < element.length; i++){
    dom.push(document.createElement(element[i]))
}
dom[0].appendChild(dom[1]);
dom[0].appendChild(dom[2]);
console.log(dom); //div,p,h1
console.log(dom[0].children);//p,h1
console.log(dom.length); //3

问题:如果有的话,元素是否会从内存中删除?

1 个答案:

答案 0 :(得分:2)

你的问题来自一个非常错误的假设:

数组DOM不会反映实际的DOM结构。

您正在创建三个元素,并且您正在为这些元素分配引用到您的数组中。

您还要为dom本身的元素分配引用

因此,每个元素最后都有两个指向它的引用 - DOM数组和dom本身。

引用完全独立于元素本身。您可以创建六个局部变量,这些变量都指向相同的元素。

在以下情况下将释放元素:

  • 没有任何东西仍然指他们
    • 包括DOM
    • `$$` <- function(str) { E = unlist( strsplit(as.character(str),"[@]") ); k = length(E); if(k==1) { eval(parse(text=str)); } else { # k = 2 nstr = paste("attributes(",E[1],")",sep=""); nstr = paste(nstr,'$',E[2],sep=""); if(k>2) { for(i in 3:k) { nstr = paste("attributes(",nstr,")",sep=""); nstr = paste(nstr,'$',E[i],sep=""); } } `$$`(nstr); } }
    • 和任何局部变量
  • 垃圾收集器运行。