<html>
<head>
<title>js</title>
</head>
<script>
function a(){

var t1 = new Date();
var div = document.getElementById("show");
var tmp = document.createDocumentFragment();
var table = document.createElement("table");
for(var i=0;i<1000;i++){

var row = table.insertRow(i);
for(var j=0;j<8;j++){

row.insertCell(j).appendChild(document.createTextNode("111"));
}
}
tmp.appendChild(table);
div.appendChild(tmp);
var t2 = new Date();
alert(t2-t1);
}
</script>
<body>
<input type="button" value="test" onclick="a();">
<div id="show"></div>
</body>
</html>
代码如上
背景:这段代码在IE6中执行时间为50多秒,在IE7中是27多秒,在火狐中却仅仅只有0.2秒
1、我希望在IE中也能够象在火狐中执行的那么快,请问应该如何优化这段代码?
2、document.createDocumentFragment();方法创建一个文档片段,在此处使用并未提高效率,请问此方法应该如何使用?
请高手指教

解决方案 »

  1.   


    <html>
    <head>
    <title>js</title>
    </head>
    <script>
    function a(){var t1 = new Date();
    var div = document.getElementById("show");
    var html=[];
    html.push("<table>");
    for(var i=0;i<1000;i++){
        html.push("<tr>");
        for(var j=0;j<8;j++){
            html.push("<td>111</td>");
        }
        html.push("</tr>");
    }
    html.push("</table>");div.innerHTML=html.join("");
    var t2 = new Date();
    alert(t2-t1);
    }
    </script>
    <body>
    <input type="button" value="test" onclick="a();">
    <div id="show"></div>
    </body>
    </html>我这边ie6是0.1秒,你试试吧
      

  2.   

    纯dom操作效率取决于浏览器,但可以从另一个角度出发, 不要不停修改dom,而是 生成整个html标签,然后
    div.innerHTML=生成的html;