JS性能探究

Question

前端时间在网上看到一个例子，就是往一个下拉框插入5千条记录的。现在自己就尝试针对2种不同的字符串拼接方式。
以下是在下拉框中插入1W条数据，2中方法如下：<script>
function test1(){
var t1 = new Date().getTime();
var strHtml = "";
for(var i=0;i<10000;i++){
strHtml += "<option>"+i+"<option>";
}
document.getElementById("d1").innerHTML = "<select>"+strHtml+"</select>";
var t2 = new Date().getTime();
document.getElementById("t1").innerHTML = t2 - t1 + "ms";
}
function test2(){
var t1 = new Date().getTime();
var arrs = new Array(10000);
for(var i=0;i<arrs.length;i++){
arrs[i] = "<option>"+i+"<option>";
}
document.getElementById("d2").innerHTML = "<select>"+arrs.join("")+"</select>";
var t2 = new Date().getTime();
document.getElementById("t2").innerHTML = t2 - t1 + "ms";
}
</script>
<a href="javascript:test1()">Test1</a><a href="javascript:test2()">Test2</a>
<div id="t1"></div>
<div id="d1" style="width:400px;border:1px solid;height:200px;overflow:auto"></div>
<div id="t2"></div>
<div id="d2" style="width:400px;border:1px solid;height:200px;overflow:auto"></div>
运行结果
IE6下：
test1： 1612ms
test2： 188ms
看来IE6下，字符串进行拼接不太给力啊，反而用数组的方式会快很多FF3.6下：
test1： 175ms
test2： 176mschrome8下： 
test1： 110ms
test2： 104ms在ff和谷歌下，两种方式的差别不是很大。

Answer 1

    var t1 = new Date().getTime();
    var tag1 = document.createElement("select");
    for(var i=0;i<10000;i++){
        tag1.options[10000] = new Option(i,i);
    }
    document.getElementById("d1").appendChild(tag1)
    var t2 = new Date().getTime();
    document.getElementById("t1").innerHTML = t2 - t1 + "ms";
火狐下比test2还要快点，到IE直接就死了，杯具

Answer 2

5楼的，你的那种方式是在select标签下添入option标签，这个我也测试过，会非常之慢！
如果直接去输出一个select标签，这样速度就会快很多了