In jQuery, how to efficiently add many elements?

Question

I currently have a sketch for a true generator. Although it works fine, it is rather slow. Each combination of booleans that I added to the <table> using jQuery. For each value, a <td> element is created by jQuery and then added to <table> . Moreover, I use jQuery UI for a nice set of buttons instead of radio buttons.

In my release of the output code, table is an array containing each logical combination. My code may be a little incomprehensible, but basically it comes down to the fact that with 4 boolean variables (16 possibilities), 96 <td> elements are created with added classes and a set of data attributes. In the second part, three groups of three radio buttons are created and converted into a set of jQuery user interface buttons.

Using the timer, I realized that it takes about 0.4 seconds before everything is full. It is not so important, but it is certainly noticeable and does not have a positive effect on the user, since every time he enters a different logical formula, it takes half a second to download.

 $table = $('#table'); $.each(table, function(k, v) { $tr = $('<tr>').addClass('res').data('number', k); $.each(v[0], function(k2, v2) { $td = $('<td>').text(v2).addClass(v2 ? 'green notresult' : 'red notresult'); for(var i = 0; i < 4; i++) { $td.data(i, i === k2); } $tr.append($td); }); $tr.append($('<td>').addClass('spacing')); $table.append( $tr.append( $('<td>').text(v[1]).addClass(v[1] ? 'green result' : 'red result') ) ); }); // ... here is some code that not slowing down $radiobuttonsdiv = $('#radiobuttonsdiv'); for(var i = 0; i < 4; i++) { var $radiobase = $('<input>').attr('type', 'radio') .attr('name', 'a'+i) .click(handleChange); // .label() is a custom function of mine which adds a label to a radio button var $radioboth = $radiobase.clone().val('both').label(); var $radiotrue = $radiobase.clone().val('true').label(); var $radiofalse = $radiobase.clone().val('false').label(); var $td1 = $('<td>').addClass('varname').html(i); var $td2 = $('<td>').attr('id', i); $td2.append($radioboth, $radiotrue, $radiofalse).buttonset(); var $tr = $('<tr>').append($td1, $td2); $radiobuttonsdiv.append($tr); } 

My questions:

• How can I optimize table filling with jQuery? Or maybe the table may not be the best solution in this scenario?
• Is it possible to pause the drawing, as this can slow down everything?

Answer 1

Try to avoid using .append in a loop, especially if you are adding a lot of elements. It is always a performance killer.

The best option is to create a line with markup and make one (or as little as possible) .append when your loop is finished.

I see that you use .data, which makes things a little more complicated, but another option is to use the metadata plugin to attach structured markup to existing tags.

Answer 2

To defer rendering, you can try creating a new table without adding it to the DOM:

 var myDisconnectedTable = $('<table></table>') 

Then add your rows to this table:

 myDisconnectedTable.append(...) 

Then add the table to the div in which you want:

 $('#idOfMyDiv').append(myDisconnectedTable) 

I do not know if this will help, but it is worth it.