2

この質問に対するコメントに触発されて、テストケースをまとめました。

私のPCのChrome 23で約15秒かかる500行のテーブルを作成しています。Bootstrap CSS を削除しても、完全に瞬時になるわけではありませんが、時間が大幅に短縮されます。

行を追加するための実際のコードは次のとおりです。

$.each(response, function (idx, row) {
  var new_row = $('#row_template').clone();
  new_row.removeAttr('id');
  $('td[data-name=col1]', new_row).text(row.col1);
  $('td[data-name=col2]', new_row).text(row.col2);
  $('td[data-name=col3]', new_row).text(row.col3);
  $('td[data-name=col4]', new_row).text(row.col4);
  $('td[data-name=col5]', new_row).text(row.col5);
  $('td[data-name=col6]', new_row).text(row.col6);
  $('td[data-name=col7]', new_row).text(row.col7);
  $('td[data-name=col8]', new_row).text(row.col8);
  $('td[data-name=col9]', new_row).text(row.col9);
  $('td[data-name=col10]', new_row).text(row.col10);
  new_row.insertBefore($('#row_template')).show();
});

HTML と を連結することで得られる実行時間はおそらく最小ですgetElementById().innerHTMLが、使いやすさ (特にテンプレートから行を取得する) を維持しながら、他の明らかな最適化を行うことはできますか?

4

2 に答える 2

3

テーブルが表示されているときに行うと遅くなります。前に非表示にして、変更後に再度表示すると、非常に高速です。

$('#results').hide();

$.each(response, function (idx, row) {
  ...
});

$('#results').show();

ここで私のソリューションをチェックしてください: http://smartk8.no-ip.org/stackoverflow/13537578.htm

于 2012-11-24T02:15:13.050 に答える
2

各行を追加しないでください。500 回再描画することを意味します。それらを html の 1 つの文字列に追加し、それをページに追加します。例: http://jsfiddle.net/yLSy9/

<button id="addmany">Add one at a time</button>
<button id="addonce">Conact then add</button>
<table>
</table>​

jQ:

$('#addmany').on('click', function(){

    for (i=0; i<5000; i++)
    {
        var row=$('<tr><td>test</td></tr>');
        row.appendTo('table');
    }
});

$('#addonce').on('click', function(){
    rows='';
    for (i=0; i<5000; i++)
    {
        var row='<tr><td>test</td></tr>';
        rows=rows+row;
    }
    $(rows).appendTo('table');
});

​
于 2012-11-24T02:44:58.947 に答える