In jQuery, how to efficiently add lots of elements?

Question

I currently have a sketch for a truthtable generator. While it works fine, it is rather slow. Each combination of boolean values I have added to a <table> using jQuery. For each value, a <td> element is created by jQuery and then added to the <table>. Moreover, I'm using jQuery UI for a nice looking buttonset instead of radio buttons.

In my posted code extract, table is an array containing each boolean combination. Perhaps my code is a little inscrutable but what it basically comes down to is that with 4 boolean variables (16 possibilities), 96 <td> elements are created with classes added and data attributes set. In the second part, three groups of three radio buttons are created and converted into a jQuery UI buttonset.

Using a timer I figured out that it takes approximately 0.4 seconds before everything is filled up. Not that big of a deal, but it is certainly noticeable and does not have a positive effect on the user as each time he enters a different boolean formula it takes half a second to load.

$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's 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 are:

How could table-filling using jQuery be optimized? Or is a table perhaps not the best solution in this scenario?
Is it perhaps possible to suspend drawing, since that might be slowing everything down?

score 7 · Accepted Answer · answered Mar 24 '11 at 16:23

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

A better option is to build up a string with the markup and do a single (or as few as possible) .append when your loop is finished.

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

score 3 · Answer 2 · answered Mar 24 '11 at 16:29

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

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

Then adding your rows to that table:

myDisconnectedTable.append(...)

Then append your table to the div you want it in:

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

I don't know that it will help, but it's worth a shot.

In jQuery, how to efficiently add lots of elements?

2 Answers2

Linked