Question

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

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

做一些实验，ajax调用似乎不会影响页面。它似乎是＆＃39;追加＆＃39;冻结页面的功能。

我已经在线阅读了如何更快地完成这项工作，但没有任何改进。

我的原始代码是......

SELECT count(*)
FROM   post_tag pt1
JOIN   post_tag pt2 USING (post_id)
WHERE  pt1.tag_id = (SELECT tag_id FROM tags WHERE tag = 'news')
AND    pt2.tag_id = (SELECT tag_id FROM tags WHERE tag = 'featured');

但是，我读了一些SO文章，上面写着“追加＆＃39;电话是一个坏主意，所以我将我的代码更新为...

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

移动＆＃39;追加＆＃39;在每个＆＃39;之外循环。

但这并没有取得预期的改善。当表更新时，页面仍会冻结大约10秒钟。

如果我删除该行：

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

然后页面不会冻结或减速（但显然表格不会更新！）

所以这让我相信这是'追加'＆＃39;导致冻结。

有什么其他提示可以加快速度吗？

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

如何加快我的ajax调用并附加到表？

1 个答案: