插的数据多的时候页面会卡死,就像死机一样,要死上2-3秒,有没有办法让主线程不要卡住?
大家看看我的代码,是我代码有问题吗?<!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></title>
    <script src="jquery-1.4.4.js" type="text/jscript"></script>
    <script type="text/jscript">
        function go() {
            var options = $("#ddl").select("options")
            for (var i = 0; i < 5000; i++) {
                var option = new Option("text" + i, "value" + i);
                options[0].add(option);
            }
        }        $(document).ready(function () {
            go();
        })
    </script>
</head>
<body>
    <select id="ddl">
        <option value="a">123</option>
    </select>
</body>
</html>

解决方案 »

  1.   

    你每插入一次页面就得reflow一次,而且时间的递增是非线形的。建议你别一次次的写入 而是先放内存,处理完再一次性写入
      

  2.   

    先拼好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></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
    function go() {
    var i = 5000, html = new Array(i);
    while(i--) {
    html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
    }
    $("#ddl").replaceWith('<select id="ddl">' + html.join("") + '</select>');
    }
    $(document).ready(function () {
    go();
    })
    </script>
    </head>
    <body>
    <select id="ddl">
    <option value="a">123</option>
    </select>
    </body>
    </html>
      

  3.   

    使用dom碎片
    createDocumentFragment来做
      

  4.   

    楼上正确 速度比 zswang 的方法要快点
      

  5.   

    快多少?请提供测试Demo,我学习一下。
      

  6.   

    小弟才疏学浅,可不可以给个demo。
      

  7.   

    测试结果你们跑下
    想当然不能解决任何问题,测试的结果才能说明问题。<!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></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script>
            function go() {
                var i = 5000, html = new Array(i);
                while(i--) {
                    html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
                }
                $("#ddl").replaceWith('<select id="ddl">' + html.join("") + '</select>');
            }
    function go1(){
    var i = 5000;
    var warp = document.createDocumentFragment();
    while(i--) {
    var option = document.createElement("option");
    option.value = "value";
    option.text = "text" + i.toString();
    warp.appendChild(option);
    }
    $("#ddl2").append(warp);
    }
            $(document).ready(function () {
                var d1 = +(new Date());
    go();
    alert(+(new Date())-d1);
    d1 = +(new Date());
    go1();
    alert(+(new Date()) - d1);
            })
        </script>
    </head>
    <body>
        <select id="ddl">
            <option value="a">123</option>
        </select>
    <select id="ddl2">
    <option value="a">123</option>
    </select>
    </body>
    </html>
      

  8.   

    我在IE8和Chrome中运行了,go1要快一些,不过在IE8中,go1无法正确显示text
      

  9.   

    在IE8里用Fragment,Option必须设置innerText才行...
      

  10.   


    <!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></title>
        <script src="jquery-1.4.4.js" type="text/jscript"></script>
        <script type="text/jscript">
            function go() {
    var frag = document.createDocumentFragment();
                var options = $("#ddl")
                for (var i = 0; i < 10000; i++) {
                    var option = new Option("text" + i, "value" + i);
    option.innerText = "text" + i;
                    frag.appendChild(option);
                }
    options.append(frag);
            }        $(document).ready(function () {
                go();
            })
        </script>
    </head>
    <body>
        <select id="ddl">
            <option value="a">123</option>
        </select>
    <input type="button" value="click me" onclick="alert($('#ddl').val())"/>
    </body>
    </html>
      

  11.   

    多谢
    我机器现在ubuntu only
    运行IE是个麻烦事。希望有测试结果
    FF下拼接字符串的方式很快
      

  12.   

    对dom操作太频繁
    拼串,然后一次性插入
      

  13.   

    IE8下
    使用拼串:460毫秒
    使用碎片:710毫秒
    <!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></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script>
    function go1() {
    var i = 5000, html = new Array(i);
    while(i--) {
    html[i] = ['<option value="value', i, '">text', i, '</option>'].join("");
    }
    $("#dd1").replaceWith('<select id="dd1">' + html.join("") + '</select>');
    } function go2() {
    var i = 5000;
    var warp = document.createDocumentFragment();
    while(i--) {
    var option = document.createElement("option");
    option.value = "value" + i;
    option.innerText = "text" + i;
    warp.appendChild(option);
    }

    $("#dd2").append(warp);
    }
    $(document).ready(function () {
    var t = +(new Date());
    go1();
    var t1 = +(new Date()) - t;
    var t = +(new Date());
    go2();
    var t2 = +(new Date()) - t;

    alert([t1, t2]); // 460,710
    })
    </script>
    </head>
    <body>
    <select id="dd1"></select>
    <select id="dd2"></select>
    </body>
    </html>
    这两种方式都会比楼主原来的方法快很多
    4楼随便丢下谁比谁快的结论就走了,没有什么依据。
    运行的环境千差万别,以实际测试的结果为准。楼主你的demo不要写相对路径,这样别人拿着demo不能直接运行,还得修改。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
      

  14.   

    我又试了一下,IE8中方法二如果不设置innerText会快一些,但是不设置又不行,不过这两种方法都已经快很多了。
    谢谢zswang,谢谢cj205。