一个效率问题？（请高手详解）

今天遇到一个效率问题？
  在网上查了下？ 却不太详细？
 有的例子说appendChild效率快
有的说：innerHTML效率快
  我找的例子：生成表格的时候innerHTML快
             别的appendChild
请高手讲解下？
   那种情况下有什么方法？
   速度问题是怎么产生的？
--------------------------------------------------------------------------------------------------<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<body></body><script>
var s=(new Date).getTime();
var t = document.createElement("table");
t.border = 1;
for(var x=0; x<1000; x++)
{
    r = t.insertRow();
    r.insertCell();
    r.cells[0].appendChild(document.createTextNode(x));
}
document.body.appendChild(t);
alert((new Date).getTime() - s + " ms")</script>
</HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD><body></body><script>
var s=(new Date).getTime();
var t = ["<table border>"];
for(var x=0; x<1000; x++)
{
    t.push("<tr><td>" + x + "</td></tr>");
}
t.push("</table>");
document.body.innerHTML = t.join("");
alert((new Date).getTime() - s + " ms")</script>
</HTML>-------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head><body>
<div id="test1"></div>
<input type="button" onclick="innerTest()" value="testInnerHTML">
<div id="test2"></div>
<input type="button" onclick="appendTest()" value="testAppendChild"><script type="text/javascript">
<!--
function innerTest(){
var t1=(new Date()).getTime();
var a="xxxxxxxx";
var b=document.getElementById("test1");
for(var i=0;i<500;i++){
b.innerHTML+=a;
}
t2 = (new Date()).getTime();
alert(t2-t1);
}function appendTest(){
var t1=(new Date()).getTime();
var b=document.getElementById("test2");
for(var i=0;i<500;i++){
//var a=document.createElement("b");
b.appendChild(document.createTextNode("xxxxxxxx"));
//b.appendChild(a);
}
t2 = (new Date()).getTime();
alert(t2-t1);
}
//-->
</script>
</body>
</html> 

解决方案 »

  1.   

    后面那个是？
      为什么这个例子测下来？
      一个8000多？
     一个才300多？
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title> new document </title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    </head><body>
    <div id="test1"></div>
    <input type="button" onclick="innerTest()" value="testInnerHTML">
    <div id="test2"></div>
    <input type="button" onclick="appendTest()" value="testAppendChild"><script type="text/javascript">
    <!--
    function innerTest(){
    var t1=(new Date()).getTime();
    var a="<b>xxxxxxxx</b>";
    var b=document.getElementById("test1");
    for(var i=0;i<500;i++){
    b.innerHTML+=a;
    }
    t2 = (new Date()).getTime();
    alert(t2-t1);
    }function appendTest(){
    var t1=(new Date()).getTime();
    var b=document.getElementById("test2");
    for(var i=0;i<500;i++){
    var a=document.createElement("b");
    a.appendChild(document.createTextNode("xxxxxxxx"));
    b.appendChild(a);
    }
    t2 = (new Date()).getTime();
    alert(t2-t1);
    }
    //-->
    </script>
    </body>
    </html> 
      

  2.   

    在执行速度的比较上，使用appendChild比innerHTML要快：
    1.innerHTML在铺到页面之前还要对内容进行解析才能铺到页面上，当包含html标记过多时，innerHTML速度会明显变慢。
    2.appendChild添加到的是dom对象，返回的也是dom对象，可以通过dom对象访问获取元素的各种属性，而innerHTML则是纯字符串，不能获取内部元素的属性。相对较慢
    虽然在使用上innerHTML比appendChild要方便，特别是创建的节点属性多，同时还包含文本的时候；
    在使用时如果数据量较大且对性能有所要求时，还是应该使用appendChild。
      

  3.   

    另外一种情况，就是当一次性加载大量且复杂的网页元素时，用innerHTML比appendChild()速度要快的；
    而当每次只加载几个网页元素，并且要频繁加载时，在这种情况下用appendChild比innerHTML就快了。
      

  4.   

    innerHTML是最慢的打个比方：
    你让一个人帮你做事情，有2个办法
    1、你直接告诉他做的办法
    2、你把你的目标告诉他，让他自己去想该怎么做哪个更快？
    当然是第1个办法快。innerHTML在收到你给他的HTML之后，还要花很大功夫来解析，当然没有直接告诉它怎么干来来得快