jQuery Cookbook - Cdn.oreilly.com - O'Reilly

}
html[++h] = ' ';
html[++h] = e(name.last);
html[++h] = '';
html[++h] = e(name.street);
html[++h] = '';
html[++h] = e(name.city);
html[++h] = ', ';
html[++h] = e(name.state);
html[++h] = ' ';
html[++h] = e(name.zip);
html[++h] = '';
}
html[++h] = '';
html[++h] = '';
$('#container')[0].innerHTML = html.join('');
$.getJSON( 'names/names-1000.json', function( json ) {
fillTable( json.names );
});
});
The new code requires the HTML code in your document to be changed to the
following:
On one test system in IE 7, the new code runs in 0.2 seconds compared with 7 seconds
for the original code. That’s 35 times faster!
Granted, the code is not as clean and elegant as the original, but your site’s visitors will
never know or care about that. What they will notice is how much faster your page
loads.
Discussion
Sometimes you’ll get lucky and find that one specific optimization is all it takes to fix
a performance problem. Sometimes, as in this recipe, you’ll need several tricks to get
the speed you want.
The biggest speed boost in this code comes from inserting a single element with
all its children in a single DOM operation, instead of inserting a lengthy series of
elements one by one. In order to do this, you need to generate the entire table as
HTML. That means you need to paste together a large number of strings to build the
HTML, which can be very fast or very slow depending on how you do it. And with
1,000 items to loop though, it’s worth finding the fastest way to write the loop itself.
You may wonder, “Is this still jQuery code? It looks like plain old JavaScript!” The
answer is yes, and yes. It’s quite all right to mix and match jQuery code with other
JavaScript code. You can use simpler jQuery ways of coding in most of your site, and
5.11 Loading Tables Faster | 111