JavaScript AppendChild 挑动的思考 _JavaScript

JavaScript AppendChild 引发的思考

来源：http://www.cnblogs.com/RuiLei/archive/2007/10/19/930079.html
??? 昨天让同事用js搞了个浮动图片功能,这样就每次把些图片直接贴过来了，节省了篇长。但是看到代码中AppendChild,感觉以前和js同事交流过AppendChild和innerHtml性能方面的话题,嗯，找了下一些我的js收集册(也就是OneNote啦),呵呵
其实是这样的，下面进入AppendChild和innerHtml的性能随语:
直接看代码，就可以了。
innerHTML:

var starttime = new Date();
for(i = 0 ; i < 100 ; i ++){
    document.body.innerHTML += "<input type='text' value='" + i + "'>";
}
alert(new Date() - starttime);

知道测试时间是比较长，大约"1000"多

appendChild:?

var starttime = new Date(); 
for(i = 0 ; i < 100 ; i ++){ 
    ds = document.createElement("input"); 
    ds.type = "text"; 
    ds.value = i; 
    document.body.appendChild(ds); 
} 
alert(new Date() - starttime);

其实以上例子还可以在改进一下，因为拼接字符串，重新解析html方面的消耗，所以速度就下来。
innerHTML:

var starttime = new Date(); 
var html = [] 
for(i = 0 ; i < 100 ; i ++){ 
    html.push("<input type='text' value='") 
    html.push(i) 
    html.push("'>") 
} 
document.body.innerHTML = html.join("") 
alert(new Date() - starttime);

时间大约为”20“

甚至如果你有更快的话，

var starttime = new Date(); 
var a = []; 
for(i = 0 ; i < 100 ; i ++){ 
    a[i]= "<input type='text' value='" + i + "'>"; 
} 

document.body.innerHTML  = a.join(""); 
alert(new Date() - starttime);

? 事实上，当不同情况下，速度之比是不同的，

如：当一次性加载大量且复杂的网页元素时，用innerHTML比appendChild()速度要快的

而当每次只加载几个网页元素，并且要频繁加载时，此时appendChild()比innerHTML就快了。Clear

最后附上浮动图片的代码:

<script> 
function link$onmouseover(){ 
    var linkimg = this.linkimg; 
    if(!linkimg){ 
        linkimg = document.createElement("img"); 
        with(linkimg){ 
            src = this.href; 
            style.position = "absolute"; 
            style.left = this.style.left; 
            style.top = this.style.top; 
        } 
        document.body.appendChild(linkimg); 
        this.linkimg = linkimg; 
    } 
    linkimg.style.display = ""; 
} 
function link$onmouseout(){ 
    var linkimg = this.linkimg; 
    if(linkimg){ 
        linkimg.style.display = "none"; 
    } 
} 
</script> 
<a id="link1" href="图示地址"> link1 </a><br /> 
<a id="link2" href="imagesCAZ4JHCC.jpg"> link2 </a> 
<script> 
var link1 = document.getElementById("link1"); 
var link2 = document.getElementById("link2"); 
link1.onmouseover = link$onmouseover; 
link1.onmouseout = link$onmouseout; 
link2.onmouseover = link$onmouseover; 
link2.onmouseout = link$onmouseout; 
</script>