Mike, sorry if my post sounded like criticism - it was not intended
that way. However the representation of the test pages is misleading -
by accident I'm sure.
The majority of the performance difference between the 2 pages is
*solely* the difference between these 2 syntax....
$("#container).append(
$("<table></table>").append(
"<tr><td>Hello</td></tr>"
)
);
$("#container).append(
"<table><tr><td>Hello</td></tr></table>"
);
Or alternately...
$("#container).html(
"<table><tr><td>Hello</td></tr></table>"
);
The syntax differences above are responsible for 85% of the speed
difference between the pages - 7-times more than the loop-optimization
is. Yet none of the points you repeated above are related to this
issue. BOTH syntax only do a single DOM append - they just do it
differently. And the 'loop' is irrelevant to this 85% difference - a
simple string will still produce the same result.
If you replace the code in your 'slow page' with the sample I gave in
my last post - using .html( html ) - you'll see that the speed
improves 7-fold -- with no change to the string-concatenation loop or
anything else. Since this is 85% of the speed difference, this is
proper way to comparison of the issues you raised. (You could also use
$("<table></table>") in BOTH pages, but then the 'fast page' takes
over 7 seconds!)
So the loop-optimization produces only a 6-times speed improvement in
IE - not 30-times. This.is still a significant improvement by itself,
but I think it important to understand that $("<table></table>") is
*really* the big culprit here. In fact, I think this is something that
should be brought to the jQuery team's attention... Why is this syntax
so slower?
Ciao,
/Kevin
On Feb 7, 1:41 pm, "Michael Geary" <m...@mg.to> wrote:
> 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 -
