填充具有500行的表需要很长时间-jQuery和Bootstrap CSS

Question

受到对这个问题的评论的启发，我整理了一个测试用例 。

它填充了一个具有500行的表格，这在我的PC上的Chrome 23中大约需要15秒。 删除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可能获得的绝对最低的执行时间，但是我可以在保持易用性的同时做其他明显的优化（尤其是从模板中获取行）吗？

Answer 1

仅当表格可见时，它才会变慢。 如果您在更改之前将其隐藏并在更改后再次显示，则速度会非常快：

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

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

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

在这里查看我的解决方案： http : //smartk8.no-ip.org/stackoverflow/13537578.htm

Answer 2

不要添加每一行-这意味着重绘500次。 将它们添加到一个html字符串中，并将其添加到您的页面中。 示例： 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');
});

​