JavaScript AppendChild 引发的思考

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

innerHTML:
JavaScript AppendChild 引发的思考
<body>
JavaScript AppendChild 引发的思考
</body>
JavaScript AppendChild 引发的思考
<script>
JavaScript AppendChild 引发的思考
var starttime = new Date();
JavaScript AppendChild 引发的思考
for(i = 0 ; i < 100 ; i ++){
JavaScript AppendChild 引发的思考    document.body.innerHTML 
+= "<input type='text' value='" + i + "'>";
JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考alert(
new Date() - starttime);
JavaScript AppendChild 引发的思考
</script>
JavaScript AppendChild 引发的思考知道测试时间是比较长,大约
"1000"
JavaScript AppendChild 引发的思考
JavaScript AppendChild 引发的思考appendChild:
JavaScript AppendChild 引发的思考
<body>
JavaScript AppendChild 引发的思考
</body>
JavaScript AppendChild 引发的思考
<script>
JavaScript AppendChild 引发的思考
var starttime = new Date();
JavaScript AppendChild 引发的思考
for(i = 0 ; i < 100 ; i ++){
JavaScript AppendChild 引发的思考    ds 
= document.createElement("input");
JavaScript AppendChild 引发的思考    ds.type 
= "text";
JavaScript AppendChild 引发的思考    ds.value 
= i;
JavaScript AppendChild 引发的思考    document.body.appendChild(ds);
JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考alert(
new Date() - starttime);
JavaScript AppendChild 引发的思考
</script> 

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

 

JavaScript AppendChild 引发的思考 innerHTML:
JavaScript AppendChild 引发的思考
< body >
JavaScript AppendChild 引发的思考
</ body >
JavaScript AppendChild 引发的思考
< script >
JavaScript AppendChild 引发的思考
var  starttime  =   new  Date();
JavaScript AppendChild 引发的思考
var  html  =  []
JavaScript AppendChild 引发的思考
for (i  =   0  ; i  <   100  ; i  ++ ) {
JavaScript AppendChild 引发的思考    html.push(
"<input type='text' value='")
JavaScript AppendChild 引发的思考    html.push(i)
JavaScript AppendChild 引发的思考    html.push(
"'>")
JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考document.body.innerHTML 
=  html.join( "" )
JavaScript AppendChild 引发的思考alert(
new  Date()  -  starttime);
JavaScript AppendChild 引发的思考
</ script >
JavaScript AppendChild 引发的思考时间大约为”
20
JavaScript AppendChild 引发的思考
JavaScript AppendChild 引发的思考甚至如果你有更快的话,
JavaScript AppendChild 引发的思考
< body >
JavaScript AppendChild 引发的思考
</ body >
JavaScript AppendChild 引发的思考
< script >
JavaScript AppendChild 引发的思考
var  starttime  =   new  Date();
JavaScript AppendChild 引发的思考
var  a  =  [];
JavaScript AppendChild 引发的思考
for (i  =   0  ; i  <   100  ; i  ++ ) {
JavaScript AppendChild 引发的思考    a[i]
= "<input type='text' value='" + i + "'>";
JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考
JavaScript AppendChild 引发的思考document.body.innerHTML  
=  a.join( "" );
JavaScript AppendChild 引发的思考alert(
new  Date()  -  starttime);
JavaScript AppendChild 引发的思考
</ script >


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

如:当一次性加载大量且复杂的网页元素时,用innerHTMLappendChild()速度要快的

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

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

 

JavaScript AppendChild 引发的思考 < script >
JavaScript AppendChild 引发的思考
function  link$onmouseover() {
JavaScript AppendChild 引发的思考    
var linkimg = this.linkimg;
JavaScript AppendChild 引发的思考    
if(!linkimg){
JavaScript AppendChild 引发的思考        linkimg 
= document.createElement("img");
JavaScript AppendChild 引发的思考        
with(linkimg){
JavaScript AppendChild 引发的思考            src 
= this.href;
JavaScript AppendChild 引发的思考            style.position 
= "absolute";
JavaScript AppendChild 引发的思考            style.left 
= this.style.left;
JavaScript AppendChild 引发的思考            style.top 
= this.style.top;
JavaScript AppendChild 引发的思考        }

JavaScript AppendChild 引发的思考        document.body.appendChild(linkimg);
JavaScript AppendChild 引发的思考        
this.linkimg = linkimg;
JavaScript AppendChild 引发的思考    }

JavaScript AppendChild 引发的思考    linkimg.style.display 
= "";
JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考
function  link$onmouseout() {
JavaScript AppendChild 引发的思考    
var linkimg = this.linkimg;
JavaScript AppendChild 引发的思考    
if(linkimg){
JavaScript AppendChild 引发的思考        linkimg.style.display 
= "none";
JavaScript AppendChild 引发的思考    }

JavaScript AppendChild 引发的思考}

JavaScript AppendChild 引发的思考
</ script >  
JavaScript AppendChild 引发的思考
< a id = " link1 "  href = " 图示地址 " >  link1  </ a >< br  />
JavaScript AppendChild 引发的思考
< a id = " link2 "  href = " imagesCAZ4JHCC.jpg " >  link2  </ a >
JavaScript AppendChild 引发的思考
< script >
JavaScript AppendChild 引发的思考
var  link1  =  document.getElementById( " link1 " );
JavaScript AppendChild 引发的思考
var  link2  =  document.getElementById( " link2 " );
JavaScript AppendChild 引发的思考link1.onmouseover 
=  link$onmouseover;
JavaScript AppendChild 引发的思考link1.onmouseout 
=  link$onmouseout;
JavaScript AppendChild 引发的思考link2.onmouseover 
=  link$onmouseover;
JavaScript AppendChild 引发的思考link2.onmouseout 
=  link$onmouseout;
JavaScript AppendChild 引发的思考
</ script >

你可能感兴趣的:(appendChild)