Hey, thanks Michael for taking the time to provide the explanation and the re-write. I'll put this into place and see how it performs. I'm sure it'll be *much* better!
Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > Behalf Of Michael Geary > Sent: Saturday, February 07, 2009 5:17 PM > To: jquery-en@googlegroups.com > Subject: [jQuery] Re: Optimize large DOM inserts > > > 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 > > > > > > >
