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 -
