javascript對Dom操作中table添加行效能問題

     

 

在做一個js控制項的時候，需要從後台取的資料後將內容添加到一個表格中，當資料量在1000行以上的時候，資料載入在IE下面會很慢，代碼如下：

頁面代碼：

 <table class="bb"></table>

js代碼

  $("#Button1").click(function () {                $.post("http://localhost:49017/table/a.ashx", {}, function (data) {                    var a = new Array();                    var k = 0;                    var t1 = new Date().getTime();                    for (var d in data) {                        a.push("<tr>");                        a.push("<td>" + data[d]["id"] + "</td>");                        a.push("<td>" + data[d]["sn"] + "</td>");                        a.push("<td>" + data[d]["title"] + "</td>");                        a.push("<td>" + data[d]["size"] + "</td>");                        a.push("<td>" + data[d]["os"] + "</td>");                        a.push("<td>" + data[d]["charge"] + "</td>");                        a.push("<td>" + data[d]["price"] + "</td>");                        a.push("</tr>");                    }                    var t2 = new Date().getTime();                    var sss = a.join('');                    var t3 = new Date().getTime();                    $(".bb").html(sss);                    var t4 = new Date().getTime();                    alert("拼接資料時間為:" + (t2 - t1) + "毫秒，轉換資料時間為:" + (t3 - t2) + "毫秒，載入" + (t4 - t3));                }, "json");            });

在IE8下返回的測試資料如下：

1000條：

5000條：

10000條：

在chrome下面返回的測試資料如下 ：

1000：

5000：

10000：

 

當資料越來越多的時候  $(".bb").html(sss);ie下面這段代碼執行的時間越來越長  ，而其他的時間都是在可以接受的範圍。當中間的資料太多的時候，執行效率完全無法接受 。

 

對操作只做一個小小的調整，把table拼出來後載入到div中。代碼如下 ：

 <div class="aa">    </div>

js代碼如下 

    $("#Button2").click(function () {                $.post("http://localhost:49017/table/a.ashx", {}, function (data) {                    var a = new Array();                    var k = 0;                    var t1 = new Date().getTime();                    a.push("<table>");                    for (var d in data) {                        a.push("<tr>");                        a.push("<td>" + data[d]["id"] + "</td>");                        a.push("<td>" + data[d]["sn"] + "</td>");                        a.push("<td>" + data[d]["title"] + "</td>");                        a.push("<td>" + data[d]["size"] + "</td>");                        a.push("<td>" + data[d]["os"] + "</td>");                        a.push("<td>" + data[d]["charge"] + "</td>");                        a.push("<td>" + data[d]["price"] + "</td>");                         a.push("</tr>");                    }                    a.push("</table>");                    var t2 = new Date().getTime();                    var sss = a.join('');                    var t3 = new Date().getTime();                    $(".aa").html(sss);                    var t4 = new Date().getTime();                    alert("拼接資料時間為:" + (t2 - t1) + "毫秒，轉換資料時間為:" + (t3 - t2) + "毫秒，載入" + (t4 - t3));                }, "json");            });

 

在IE8下返回的測試資料如下：

1000條：

5000條：

10000條：

在chrome下面返回的測試資料如下 ：

1000：

5000：

10000：

 

對比上面的測試資料  chrome變化不大，方法一的執行效率還要高一點  ，在ie下面就是大幅度的提升效率了。將載入時間降低了10倍以上。

 

總結：

      在ie下面對table載入tr td對象應該是引起了某種操作，導致效率低。而將table加到div上就不會引起這種操作 。在js操作dom對象的時候，需要盡量減少對dom的操作 。

     推薦一篇關於dom操作的文章： 提升JavaScript運行速度之DOM篇