[jQuery] Re: Optimize large DOM inserts

[Rick Faircloth]

Hi, Mike, et al...

I'm having the same problem loading the DOM with a lot
of generated HTML and I'm very interested in your approach
to generating the code.

I looked over the example you have at ...loop2.html and
have tried to modify it, but I'm afraid there's too much I don't
understand.

My code works, but it's slow when loading the DOM making the
browser to "freeze" and I'm afraid that will confuse the user.

If it's not too much trouble, would you consider modifying my
code below to follow your pattern so I can see if it speeds up
loading my DOM?

I would appreciate it very much, if you have the time or interest.

Rick

Here's my table building code:

function populateDutyTable(response) {

        //First, empty table body of data
        $('#scheduleBody').empty();
        currentDay = "";

        //For each row within the query
        $.each(response.QGETDUTYSCHEDULE.DATA, function(i, row) {

                if (currentDay != row[1]) {
                //Define a variable that will hold the html string
                var myRow1 = '<tr>';

                        currentDay = row[1];

                        myRow1 += '<td class="cell-day">' + row[1] + '</td>';
                        myRow1 += '<td class="cell-date">' + row[2] + '</td>';
                        myRow1 += '<td class="cell-blank" 
colspan="5">&nbsp;</td>';
                        myRow1 += '</tr>';

                        $('#scheduleBody').append(myRow1);
                }
                
                var myRow2 = '<tr>';
                        myRow2 += '<td class="cell-blank-day">&nbsp;</td>';
                        myRow2 += '<td class="cell-blank-date">&nbsp;</td>';
                        myRow2 += '<td class="cell-am-am">' + row[3] + '</td>';
                        myRow2 += '<td class="cell-position">' + row[4] + 
'</td>';
                        myRow2 += '<td colspan="3">Cell Content</td>';

                        myRow2 += '</tr>';
                        
                        //Append row with names to the body of the table
                        $('#scheduleBody').append(myRow2);

        });

}

And here's what you coded:

                $(function() {
                        
                        var rows = [];
                        for( var i = 0;  i < 2000;  ++i ) {
                                rows[i] = { text: ''+i };
                        }
                        
                        var t1 = + new Date;
                        
                        function loadTable( rows ) {
                                var out = [], o = -1;
                                out[++o] = '<table><tbody>';
                                for( var row, iRow = -1;  row = rows[++iRow]; ) 
{
                                        out[++o] = '<tr><td>';
                                        out[++o] = row.text;
                                        out[++o] = '</td></tr>';
                                }
                                out[++o] = '</tbody></table>';
                                $('#container').html( out.join('') );
                        }
                        loadTable( rows );
                        
                        var t2 = + new Date;
                        alert( ( t2 - t1 ) / 1000 + ' seconds' );
                });



> -----Original Message-----
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On 
> Behalf Of Michael Geary
> Sent: Thursday, February 05, 2009 10:26 PM
> To: jquery-en@googlegroups.com
> Subject: [jQuery] Re: Optimize large DOM inserts
> 
> 
> "...there is not much room for improvement left."
> 
> You just know that when you say that, someone will come along with a 20x-40x
> improvement. ;-)
> 
> http://mg.to/test/loop1.html
> 
> http://mg.to/test/loop2.html
> 
> Try them in IE, where the performance is the worst and matters the most.
> 
> On my test machine, the first one runs about 6.3 seconds and the second one
> about 0.13 seconds.
> 
> -Mike
>