javascript - 在动态创建的大型表中加速 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”循环中。

也许有比这两个更好的解决方案？另一个问题 - 在表格准备好之前隐藏表格是否有帮助？只是显示: table 上没有？没有不同？谢谢

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('') + '';

在这种情况下性能会有所提高。最后但并非最不重要的一点是，当您有数千行时，分页是一个不错的选择，因为浏览器需要时间来呈现，这是糟糕的性能!