Question

受到this question a testcase评论的启发，我将{{3}}放在一起。

它填充了500行的表格，在我的电脑上的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');
});

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

2 个答案: