JavaScript AppendChild 引发的思考

今天在网上找到一个AjaxPro生成Tree的例子，看到用了很多的js代码，我这方面不是强项，于是网上查了下资料：

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>

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>

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

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

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>

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>

posted on 2009-03-23 10:52 ToKens 阅读(213) 评论(0) 收藏举报