100分紧急求救：当向Select中用Javascript编程动态加入3000多条数据时，怎样可以加快加入的速度。删除也是。

示范了两种方法，test2是加速过的，时间复杂度是O1，数据多时明显要快很多：<BODY>
<select style="width:80" id=s1></select>
<button onclick="test1()">test1</button>
<button onclick="test2()">test2</button>
<SCRIPT>
function test1(){
var d=new Date()
var s="<select style=\"width:80\" id=s1>";
for (var i=0;i<3000;i++)
s += "<option value="+i+">"+i+"</option>";
s += "</select>";
s1.outerHTML = s;
alert("time used:"+(new Date()-d))
}
function test2(){
var d=new Date();
var s=new Array();
s[0]="<select style=\"width:80\" id=s1>";
for (var i=0;i<3000;i++)
s[i+1] = "<option value="+i+">"+i+"</option>";
s[s.length] = "</select>";
s1.outerHTML = s.join("");
alert("time used:"+(new Date()-d))
}
</SCRIPT>
</BODY>

解决方案 »

  1.   

    扩展 SELECT 元素中的选项
    对于上一条使用 HTML 文本方法的规则来说，将大量 OPTION（英文）元素添加到 SELECT（英文）中的情况是一种例外。这时候，使用 innerHTML 属性比调用 createElement 方法访问选项集合效率更高。 技巧 5：使用 innerHTML 将大量选项添加到 SELECT 元素中。 
    使用字符串连接操作来建立 SELECT 元素的 HTML 文本，然后使用此技巧设置 innerHTML 属性。对于数量特别大的选项，字符串连接操作也会影响性能。在此情况下，请建立一个数组并调用 Microsoft JScript&reg; join（英文）方法来执行 OPTION 元素 HTML 文本的最终连接。请显示慢： var opt;
     divUpdate.innerHTML = "<SELECT ID='selUpdate'></SELECT>";
     for (var i=0; i<1000; i++)
     {
      opt = document.createElement( "OPTION" );
      selUpdate.options.add( opt );
      opt.innerText = "第 " + i + " 项";
     }快： var str="<SELECT ID='selUpdate'>";
     for (var i=0; i<1000; i++)
     {
      str += "<OPTION>第 " + i + " 项</OPTION>";
     }
     str += "</SELECT>";
     divUpdate.innerHTML = str;更快： var arr = new Array(1000);
     for (var i=0; i<1000; i++)
     {
      arr[i] = "<OPTION>第 " + i + " 项</OPTION>";
     }
     divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";
      

  2.   

    为什么有速度上的区别？对于操作上来说：
    1.
    动态创建Element是最慢的。
    如：opt = document.createElement( "OPTION" );2.
    字符串连接是其次.
    如：  str += "<OPTION>第 " + i + " 项</OPTION>";
    当字符串很小的时候，这个操作还比较快，但是当循环到一定程度的时候
    str变得很大，每次的操作都会变慢3
    数组连接最快了,用 Array.join方法
      

  3.   

    一身冷汗。我还一直以为这样子做很独创了呢，没想到早就被人总结发表了的。（想起来《射雕》里面的瑛姑，以为九宫就很独创了）Go_Rush(阿舜)帖的文章是从哪里看来的？
      

  4.   

    MSDN Online 中文站点呀http://www.microsoft.com/china/msdn/msdnonline/features/articles/dhtmlperf.asp
      

  5.   

    以前讨论过，我也以为自己...
    http://expert.csdn.net/Expert/TopicView1.asp?id=752688
      

  6.   

    顺便提一下：
    ------------------------------------------------
    更快： var arr = new Array(1000);
     for (var i=0; i<1000; i++)
     {
      arr[i] = "<OPTION>第 " + i + " 项</OPTION>";
     }
     divUpdate.innerHTML = "<SELECT ID='selUpdate'>" + arr.join() + "</SELECT>";
    ------------------------------------------------其中的arr.join()应该写为arr.join("")比较好。因为arr.join()会自动在每两个数组元素之间插入一个默认的分隔符（逗号），虽然它不会被显示出来，但是 ...</option>,<option>... 这样的一个串显然不是我们原来想要的。
      

  7.   

    function test2(){
    var d=new Date();
    var s=new Array();
    s[0]="<select style=\"width:80\" id=s1>";
    for (var i=0;i<3000;i++)
    s[i+1] = "<option value="+i+">"+i+"</option>";
    s[s.length] = "</select>";
    s1.outerHTML = s.join("");
    alert("time used:"+(new Date()-d))
    }
    function test3(){
    var d=new Date();
    var s=new Array();
    s[0]="<select style=\"width:80\" id=s1><option value=";
    for (var i=0;i<3000;i++)
    s[i+1] = i+">"+i;
    s[s.length] = "</option></select>";
    s1.outerHTML = s.join("</option><option value=");
    alert("time used:"+(new Date()-d))
    }
      

  8.   

    上面的程序有误:
    function test2(){
    var d=new Date();
    var s=new Array();
    s[0]="<select style=\"width:80\" id=s1>";
    for (var i=0;i<3000;i++)
    s[i+1] = "<option value="+i+">"+i+"</option>";
    s[s.length] = "</select>";
    s1.outerHTML = s.join("");
    alert("time used:"+(new Date()-d))
    }
    function test3(){
    var d=new Date();
    var s11=new Array();
    s11[0]="<select style=\"width:80\" id=s1><option value=";
    for (var i=1;i<3001;i++)
    s11[i] = i+">"+i;
    s12 = "</select>";
    s1.outerHTML = s11.join("<option value=")+s12;
    alert("time used:"+(new Date()-d))
    }
      

  9.   

    呵呵，JK_10000(JK1)的test3确实要快那么一点点，但是我为什么不这么做呢，因为可读性变差了，而性能提高的又太少（3000条的时候几乎没有差别，10000条的时候也只快0.2秒），没有很大的意义。
      

  10.   

    见笑了！
    似乎是：主要时间花在“s1.outerHTML=thestr”，即：将字符串解释出来
    function test2(){
    var a,b,c,d;
    a=new Date();
    var s=new Array();
    for (var i=0;i<3000;i++)
    s[i+1] = "<option value="+i+">"+i+"</option>";
    s[0]="<select style=\"width:80\" id=s1>";
    s[s.length] = "</select>";
    b=new Date();
    var thestr = s.join("");
    c=new Date();
    s1.outerHTML=thestr;
    d=new Date();

    alert("time used:\n"+a*1+"-->\n"+b*1+"-->\n"+c*1+"-->\n"+d*1)
    }
      

  11.   

    我試過將outerHTML改成innerHTML將會出錯???
      

  12.   

    改了当然出错。<select><select>套起来了。不过建OPTION对象真的是慢，用了10秒，109727，跟560差将近200倍啊。