当前位置: 代码迷 >> JavaScript >> JavaScript AppendChild 挑动的思考
  详细解决方案

JavaScript AppendChild 挑动的思考

热度:545   发布时间:2012-08-30 09:55:54.0
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>

?

?

  相关解决方案