在大型動態創建的表中加速for循環文本替換

Question

因此，在通過AJAX調用向表中動態添加了數千行之后，最后，我想遍歷整個表並將日期數據替換為人類可讀的格式。 僅供參考，該調用每秒增加50行（API限制）。

    var t = document.getElementById('theTable');
    for(var i=1;i<t.rows.length;i++) {
      dateOld = $("tr:nth-child("+i+") td:nth-child(3)").text();
      myDate = new Date( dateOld *1000);
      $("tr:nth-child("+i+") td:nth-child(3)").text(myDate.toLocaleString());
      dateOld2 = $("tr:nth-child("+i+") td:nth-child(4)").text();
      myDate = new Date( dateOld2 *1000);
      $("tr:nth-child("+i+") td:nth-child(4)").text(myDate.toLocaleString());
    }

表格填滿后，當我運行此腳本時，要花幾秒鍾的時間來處理1000行以下的內容，但是一旦超過5000行，就需要很長時間，甚至更糟的是15000，在嘗試執行此操作后便崩潰了幾分鍾。

關於如何使此腳本更快運行的任何提示？

另外，我在for循環中使用了它，用來逐行替換它

  success: function (apiResponse){
   for(var item in apiResponse.response.sessions){
     var row = $('<tr>');
     $('#theTable tr:first th').each(function(){
      var td = "<td>" + apiResponse.response.sessions[item][$(this).text()] + "</td>";
      row.append(td);
     });
     $(row[0].outerHTML).appendTo("#theTable");
     dateOld = $("tr:last-child td:nth-child(3)").text();
     myDate = new Date( dateOld *1000);
     $("tr:last-child td:nth-child(3)").text(myDate.toLocaleString());
     dateOld2 = $("tr:last-child td:nth-child(4)").text();
     myDate2 = new Date( dateOld2 *1000);
     $("tr:last-child td:nth-child(4)").text(myDate2.toLocaleString());
   }

也許最后要分批完成所有操作是一個錯誤的決定，所以我決定提供舊代碼，添加后將逐行處理。 但是一旦表達到3000行，向表中添加新行就變得非常慢，因為將這段代碼保留在“ for”循環中。

也許這兩個有更好的解決方案？ 另一個問題-在填充桌子直到准備好之前隱藏桌子是否有幫助？ 只是顯示：桌上沒有？ 沒有不同？ 謝謝

Answer 1

我認為您應該在生成html文本之前對源數據進行格式化，因為操作dom的性能不好。 然后使用以下數組連接字符串：

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];

for (var i = 0,
l = arr.length; i < l; i++) {
    list[list.length] = '' + arr[i] + '';
}
list = '' + list.join('') + '';

在這種情況下，性能將會提高。 最后但並非最不重要的一點是，當您有成千上萬的行時，分頁是一個不錯的選擇，因為瀏覽器需要時間來渲染，這是很糟糕的性能！

Answer 2

最好實時轉換日期。 您可以在成功處理程序中執行此操作。

  success: function (apiResponse){
   for(var item in apiResponse.response.sessions){
     var row = $('<tr />');
     $('#theTable tr:first th').each(function(ind){//ind will be in use
       var val = apiResponse.response.sessions[item][$(this).text()];
       row.append($("<td />").html(function(){
                     if(ind == 2 || ind == 3){//nth-child(3) and (4)
                        return (new Date(val * 1000)).toLocaleString();
                     }
                     else
                       return val;
                  })); 
     });
     row.appendTo('#theTable');
     }//for(item
     /* no need any more
     $(row[0].outerHTML).appendTo("#theTable");
     dateOld = $("tr:last-child td:nth-child(3)").text();
     myDate = new Date( dateOld *1000);
     $("tr:last-child td:nth-child(3)").text(myDate.toLocaleString());
     dateOld2 = $("tr:last-child td:nth-child(4)").text();
     myDate2 = new Date( dateOld2 *1000);
     $("tr:last-child td:nth-child(4)").text(myDate2.toLocaleString());
     */
   }//success