为什么JS这么慢，送分了！（可再加分）

呵呵，js是一种解释型语言，不用对它期望过高，再说，dom本身就很占内存，尽量优化吧，另外，现在js大多是客户端的js，这种情况出现的几率很少

解决方案 »

  1.   

    不要用document.write的方法，使用创建控件的方法
      

  2.   

    我的测试网页里是用document.write，但在正式网页里用的是ASP.NET在服务器端产生了500个文本框，DOM树大了，导致很慢，有没有提速的办法？
      

  3.   

    <html>
    <head><title>test</title></head>
    <body><button id="button1" onclick="InitTextBox();">赋值</button><div></div>
    <script>
    var d = new Date()
    var n=500;
    var st1 = "<tr><td>td1</td><td>td2</td><td>td3</td><td><input type='text' id='text_";
    var st2 = "' formula='k*100-a*100+1dkkdkdk' /></td></tr>";
    var ar=[];
    for (var i=0; i < n; i++) ar[i]=i;
    var st3 = "<table border=1>"+st1+ar.join(st2+st1)+st2+"</table>";
    document.all.tags("div")[0].innerHTML = st3;
    alert("生成表格用时"+(new Date()-d)+"微秒") function InitTextBox()
    {
    var d = new Date()
    var inputs = document.getElementsByTagName("input");
    var len = inputs.length;
    for (var i=0; i < len; i++)
    {
    inputs[i].value = inputs[i].formula;
    status=i;
    }
    alert("赋值用时"+(new Date()-d)+"微秒")
    }
    </script>
    </body>
    </html>
    第一次赋值特别快，第二次开始就慢了，不知是否因为input里面有了值的缘故。
      

  4.   

    关于创建控件，可以参考以下代码：<html>
        <head><title>Tab_Add_Del</title>
        <script language="JavaScript">    function addRowToTable()
        {
    var tbl = document.getElementById('tblSample');
    var lastRow = tbl.rows.length;
    // if there's no header row in the table, then iteration = lastRow + 1
    var iteration = lastRow;
    var row = tbl.insertRow(lastRow);

    // left cell
    var cellLeft = row.insertCell(0);
    var textNode = document.createTextNode(iteration);
    cellLeft.appendChild(textNode);

    // right cell
    var cellRight = row.insertCell(1);
    var el = document.createElement('input');
    el.setAttribute('type', 'text');
    el.setAttribute('name', 'txtRow' + iteration);
    el.setAttribute('size', '40');
    cellRight.appendChild(el);
        }
        </script>
        </head>
        <body>
          <form>
            <input type="button" value="Add" onclick="addRowToTable();" />
            <table border="1" id="tblSample">
                <tr>
                    <th colspan="2">Sample table</th>
                </tr>
                <tr>
           <td>1</td>
           <td><input type="text" name="txtRow1" size="40" /></td>
                </tr>
             </table>
           </form> 
        </body>
    </html>
      

  5.   

    不好意思，可能大家误解我的意思了！我的那个例子是说如果这个网页没有其它的table（可能上千行）和JavaScript，那么它的速度还是可以接受的，但当网页膨胀到5000行时，那么同样的赋值，却要花费3 分钟！（我试过如果不赋值，则不会停顿）问题在于是不是真的DOM树变大了，从而找到那些<input type="text" id="text_i" formula="dkkd"/>控件的时间就处长了？为什么会这样的？
      

  6.   

    appendChild在大量创建对象的时候是比较慢的。
      

  7.   

    如果到5000行的话,你的创建控件就会提示
    "该页上的脚本造成Internet Explorer运行速度减慢 "看一下,这是阿信写的用cloneNode克隆
    5000行,总共用了4206ms<script>
    function addRow4() {
    var d = new Date();
    var t = document.getElementById("table4").tBodies[0];
    for(var i=0;i<5000;i++) {
    t.appendChild(t.firstChild.cloneNode(true));
    }
    document.getElementById("description4").innerHTML = "总共用了" + (new Date() - d) + "ms";
    }
    </script>
    <p>4.用cloneNode克隆！</p>
    <div class="test">
    <table border="1" width="100%" id="table4">
    <tr>
    <td>fason阿信</td>
    </tr>
    </table>
    </div>
    <input type=button value="添加行测试" onclick="addRow4()">
    <span id="description4"></span>