2

受到对这个问题的评论的启发，我整理了一个 testcase。

它在我的 PC 上的 Chrome 23 中填充了一个包含 500 行的表，这大约需要 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，但是我可以在保持一些易用性的同时进行任何其他明显的优化（尤其是从模板中获取行）吗？

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 字符串并将其添加到您的页面。示例：http: //jsfiddle.net/yLSy9/

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

问：

$('#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 回答