JavaScript AppendChild 引发的思考

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

innerHTML:
< body >
</ body >
< script >
var  starttime  =   new  Date();
for (i  =   0  ; i  <   100  ; i  ++ ) {
    document.body.innerHTML += "<input type='text' value='" + i + "'>";
}
alert( new  Date()  -  starttime);
</ script >
知道测试时间是比较长，大约 " 1000 " 多

appendChild:
< body >
</ body >
< script >
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);
</ script >

 

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

innerHTML:
< body >
</ body >
< script >
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);
</ script >
时间大约为” 20 “

甚至如果你有更快的话，
< body >
</ body >
< script >
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);
</ script >

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

如：当一次性加载大量且复杂的网页元素时，用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 >