Filling a table with 500 rows takes a lot of time - jQuery and Bootstrap CSS

Question

Inspired by the commentary on this question , I put together a test file .

It fills in a 500 row table, which takes about 15 seconds in Chrome 23 on my PC. Removing CSS Bootstrap does not make it instant, but significantly improves the time.

Actual code for adding lines:

$.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 smallest runtime that I probably get by concatenating HTML and getElementById().innerHTML , but can I do any other obvious optimization while maintaining some ease of use (especially getting the string from the template)?

Answer 1

It is slow when you do this while the table is visible. If you hide it earlier and show it again after the changes, it's pretty quick:

 $('#results').hide(); $.each(response, function (idx, row) { ... }); $('#results').show(); 

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

Answer 2

Do not add each line - this means redrawing 500 times. Add them to one line of html and add them to your page. Example: 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'); });​