Question

Inspired by the comment on this question I put together a testcase.

It’s populating a table with 500 rows which takes about 15 seconds in Chrome 23 on my PC. Removing the Bootstrap CSS doesn’t exactly make it instant but improves the time significantly.

The actual code for adding the rows is:

$.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();
});

The abolutely lowest execution time I would probably get by concatenating HTML and getElementById().innerHTML, but can I do any other obvious optimizations while still maintaining some ease of use (especially getting the row from the template)?

Answer 1

It is only slow when you do it while the table is visible. If you hide it before and show it again after the changes it is quite fast:

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

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

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

Check out my solution here: http://smartk8.no-ip.org/stackoverflow/13537578.htm