如何加快ajax调用的速度并将其追加到表中

Question

我有一个ajax调用，它调用大约1000行并更新我的网页上的一个表。

在桌子上等待更新时，页面会冻结大约10秒——页面不会滚动，鼠标悬停不起作用，等等。

通过一些实验，ajax调用似乎不会影响页面。似乎是"append"函数冻结了页面。

我在网上读过关于如何更快地实现这一点的文章，但没有任何改进。

我最初的代码是。。。

$.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文章，说循环"append"调用是个坏主意，所以我更新了我的代码。。。

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);
},
});

并将"append"移到了"each"循环之外。

但这并没有带来预期的改善。当表格更新时，页面仍会冻结约10秒。

如果我删除行：

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

然后页面不会冻结或减慢速度(但显然表不会更新！)

因此，这让我相信是"附加"导致了冻结。

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

Answer 1

我尝试过的最快的方法如下。看看这篇博文：

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调用。。。