javascript - 如何加快我的 ajax 调用并追加到表中？

Question

我有一个 ajax 调用，调用了大约 1,000 行并更新了我网页上的表格。

在等待表格更新时，页面卡住大约 10 秒 - 页面无法滚动，鼠标悬停不起作用等。

做了一些实验，ajax 调用似乎并没有影响页面。它似乎是卡住页面的“追加”功能。

我已在网上阅读有关如何使这更快的信息，但没有任何改进。

我的原始代码是...

$.ajaxSetup({ async: true });
$.ajax({
  cache: false,
  url: 'ajax_addtablerows.php',
  dataType: 'json',
  success: function(data) {
  $.each(data, function (i,obj) {
    tableUpdate = '<tr><td class="col1">' + obj.col1 + '</td><td class="col2">' + obj.col2 + '</td><td class="col3">' + obj.col3 + '</td><td class="col4">' + obj.col4 + '</td></tr>';
    $('#myTable').append(tableUpdate);
  });
},
});

但是我读了一些 SO 文章说循环“追加”调用是个坏主意，所以我更新了我的代码......

var tableUpdate = "";
$.ajaxSetup({ async: true });
$.ajax({
  cache: false,
  url: 'ajax_addtablerows.php',
  dataType: 'json',
  success: function(data) {
  $.each(data, function (i,obj) {
    tableUpdate += '<tr><td class="col1">' + obj.col1 + '</td><td class="col2">' + obj.col2 + '</td><td class="col3">' + obj.col3 + '</td><td class="col4">' + obj.col4 + '</td></tr>';
  });
  $('#myTable').append(tableUpdate);
},
});

并将“追加”移到“每个”循环之外。

但这并没有取得预期的改善。表格更新时，页面仍会卡住大约 10 秒。

如果我删除该行:

$('#myTable').append(tableUpdate);

然后页面不会卡住或变慢(但显然表格不会更新!)

所以这让我相信是导致卡住的“追加”。

还有其他加快速度的技巧吗？

Answer 1

我尝试过的最快的方法如下。看this blog post :

success (data) {
    var arr = [];
    var i = 0;
    var length = data.length;
    for (var j = 0; j < length; j++) {
        arr[i++] = '<tr><td class="col1">';
        arr[i++] = data[j].col1;
        arr[i++] = </td><td class="col2">;
        arr[i++] = data[j].col2;
        arr[i++] = </td><td class="col3">;
        arr[i++] = data[j].col3;
        arr[i++] = </td><td class="col4">;
        arr[i++] = data[j].col4;
        arr[i++] = '</td></tr>';
    }
    $('#myTable').append(arr.join(''));
}

但正如@charlietfl 在评论中提到的，您可能应该减少从 ajax 调用返回的数组数量，让浏览器在合理的时间内呈现它们。您可以在处理完第一批后进行另一个 ajax 调用...