No need to shout. :-)
I never claimed that these pages reflect only the difference between the
array join and string concatenation. On the contrary, in my other message in
this thread I listed all of the factors that make the code faster:
* Explicit for loop (and the fastest kind of for loop) - no function
callback for each row.
* Builds an array of string fragments and then joins it, instead of string
concatenation.
* Builds the array with "out[++o] = ..." instead of the more obvious
"out.push(...)" (faster in IE).
* Instead of inserting a large number of sibling DOM elements (the TRs)
together, inserts only a single DOM element (the TABLE).
Now it is very useful to know how much of the performance improvement is due
to each of these individual tricks, and thank you for doing that testing. My
purpose in posting was to combine all of the optimizations to create the
fastest possible code.
-Mike
> From: Kevin Dalman
>
> These test pages DO NOT accurately compare the speed of
> array.join("") VS string+="...". The biggest speed difference
> between the two is REALLY that one uses $("<table></table>")
> and one doesn't. If this is removed from the 'slow' page, the
> load-speed goes from 8.7 sec to 1.5 sec. This is still
> 6-times longer than the fast version - but no longer 30-times longer!
>
> Conversely, I changed the 'fast' page to use the append
> syntax (after removing <table> and <tbody> from the array):
>
> $('#container').append( $('<table></table>').append( out.join('') ) );
>
> This changed the 'fast' load from 0.24 sec to 7.3 sec! So
> even the 'fast loop' page performed 30-times slower when the
> element-append method is used!
>
> There was another code difference as well - the fast page uses $
> ('#container').html() and the slow-page $('#container').append().
> However, since the container is empty, it does not cause any
> significant speed difference.
>
> So for a TRUE loop-speed comparison, the code for the 'slow version'
> should be:
>
> var html = '<table><tbody>';
> $.each( rows, function( iRow, row ) {
> html += '<tr><td>' + row.text + '</td></tr>'; }); html +=
> '</tbody></table>'; $('#container').html( html );
>
> This now uses the same html() syntax as the fast version,
> isolating the difference between the pages to ONLY the 2
> loops. Now there is less than a 1.3 sec difference - instead
> of 8+ seconds.
>
> Now it becomes clear that the biggest lesson here is that append
> ("<table<</table>") is a much bigger problem than the loop
> code. This is important to know because it would apply even
> if there were NO loop at all!
>
> Thanks for bringing both these details to my attention. I do
> a lot of dynamic HTML generation, so it's helpful to know
> what to watch out for.
>
> /Kevin
>
> On Feb 5, 7:25 pm, "Michael Geary" <m...@mg.to> wrote:
> > "...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
> >
> >
> >
> > > From: Ricardo Tomasi
> >
> > > Concatenating into a string is already much faster than
> appending in
> > > each loop, there is not much room for improvement left.
> What you can
> > > do improve user experience though is split that into a recursive
> > > function over a setTimeout, so that the browser doesn't
> freeze and
> > > you can display a nice loading animation.
> >
> > > On Feb 5, 5:03 pm, James <james.gp....@gmail.com> wrote:
> > > > I need tips on optimizing a large DOM insert to lessen the
> > > "freeze" on
> > > > the browser.
> >
> > > > Scenario:
> > > > I receive a large amount of JSON 'data' through AJAX from a
> > > database
> > > > (sorted the way I want viewed), and loop through them to
> > > add to a JS
> > > > string, and insert that chunk of string into a tbody of a
> > > table. Then,
> > > > I run a plug-in that formats the table (with pagination, etc.).
> > > > Simplified sample code:
> >
> > > > var html = '';
> > > > $.each(data, function(i, row) {
> > > > html += '<tr><td>data from json</td></tr>';});
> >
> > > > $("tbody").append(html);
> > > > $("table").formatTable();
> >
> > > > formatTable() requires that the table has to be "completed"
> > > before it
> > > > can be executed.
> > > > Is there any way I can optimize this better? I think I've read
> > > > somewhere that making a string too long is not good,
> but I've also
> > > > read that updating the DOM on each iteration is even worst.
> >
> > > > Any advice would be appreciated!- Hide quoted text -
> >
> > - Show quoted text -
>
