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

Question

受到 this question 评论的启发我整理了a testcase .

在我的电脑上的 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 可能会获得绝对最低的执行时间，但是我可以做任何其他明显的优化，同时仍然保持一些易用性(特别是从模板)？

Answer 1

只有在表格可见时执行此操作才会很慢。如果您之前隐藏它并在更改后再次显示它，速度相当快:

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

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

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

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