私のajaxコールをスピードアップしてテーブルに追加する方法は？

Question

私は約1,000行を呼び出すと、私のWebページ上のテーブルを更新するajax呼び出しがあります。

、更新するために、テーブルの上に約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); 
    }); 
}, 
}); 

しかし、私は「APPEND」コールが悪い考えだったルーピングと述べ、いくつかの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); 
}, 
}); 

「追加」を '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呼び出しから返された配列の量を減らす必要があります：this blog postを見てください。最初のバッチを処理した後に別のAjax呼び出しを行うことができます。