Rick, first you need to arrange your HTML to allow you to insert the entire
<table> element in one fell swoop. IOW, put the table inside another
container element that has nothing else in it, e.g.
<div id="scheduleContainer">
... <table> and children will be inserted here ...
</div>
Then your code might look something like:
function populateDutyTable(response) {
var currentDay = '';
var rows = response.QGETDUTYSCHEDULE.DATA;
var out = [], o = -1;
out[++o] = '<table id="scheduleBody">';
for( var row, i = -1; row = rows[++i]; ) {
var day = row[1];
if( currentDay != day ) {
currentDay = day;
out[++o] = '<tr><td class="cell-day">';
out[++o] = row[1];
out[++o] = '</td><td class="cell-date">';
out[++o] = row[2];
out[++o] = '</td><td class="cell-blank"
colspan="5"> </td></tr>';
}
out[++o] = '<tr><td class="cell-blank-day"> </td><td
class="cell-blank-date"> </td><td class="cell-am-am">';
out[++o] = row[3];
out[++o] = '</td><td class="cell-position">';
out[++o] = row[4];
out[++o] = '</td><td colspan="3">Cell Content</td></tr>';
}
out[++o] = '</table>';
$('#scheduleContainer').html( out.join('') );
}
In addition to the other optimizations I mentioned in my earlier message, I
also combined consecutive string constants into one. You may prefer to keep
them separate for readability and maintainability, at a slight cost in
speed.
-Mike
> From: 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"> </td>';
> myRow1 += '</tr>';
>
> $('#scheduleBody').append(myRow1);
> }
>
> var myRow2 = '<tr>';
> myRow2 += '<td
> class="cell-blank-day"> </td>';
> myRow2 += '<td
> class="cell-blank-date"> </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
> >
>
>
