One interesting side note is that, according to John Resig's
presentation on recent changes to jQuery internals (at last weekend's
jQuery conference):
for (var i=0; i < 250; i++) {
$('some thing').attr('id', 'foo' + i).appendTo('ul');
}
... is now faster than this:
for (var i=0; i < 250; i++) {
$('ul').append('some thing');
}
cf. http://www.slideshare.net/jeresig/recent-changes-to-jquerys-internals
(slide 35)
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Sep 18, 2009, at 11:17 PM, Michael Geary wrote:
You will get the fastest load time by building an HTML string and
inserting it. In a test case I wrote for the jQuery Cookbook, I got
a 60X faster load time with a 1000-row table by using an HTML string
instead of building up the table with jQuery's DOM functions. You
won't see that dramatic an improvement in a more typical widget, but
it can still be a big speedup.
Some specifics:
* Make sure your HTML has a single outermost container element, not
a series of sibling elements. Wrap the whole thing in a if you
have to.
* Instead of concatenating a string, append to an array with
arrayname[++index] = 'stuff'; and then .join('') the array.
* If you're looping over a lengthy JSON or JavaScript array, use the
for loop from the code below instead of $.each().
* You can attach event handlers to elements in your HTML by using
jQuery selectors after appending the HTML into the DOM. Avoid
selectors that select many multiple elements (such as one per row or
column in a long table); use event delegation instead.
Here's the test code:
function esc( text ) {
return text
.replace( '&', '&' )
.replace( '<', '<' )
.replace( '>', '>' );
}
$(document).ready( function() {
function fillTable( names ) {
var e = esc; // local reference to reduce name lookups
var html = [], h = -1;
html[++h] = '';
html[++h] = '';
for( var name, i = -1; name = names[++i]; ) {
html[++h] = '';
html[++h] = e(name.first);
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 names-1000.json file loaded by the code looks like this:
{
"names": [
{
"first": "Belva",
"last": "Clegg",
"street": "1327 Demyan Drives",
"city": "Ellerson Rapids",
"state": "ST",
"zip": "13030"
},
{
"first": "Suzette",
"last": "Grundy",
"street": "6473 Beazer Dale",
"city": "Ahern",
"state": "LE",
"zip": "91670"
},
// ...997 more of these...
{
"first": "Libby",
"last": "Gladfelter",
"street": "6942 Duplantis Parkway",
"city": "Anguiano Ridge",
"state": "NO",
"zip": "50045"
}
]
}
See the book when it comes out for more details :-) or fire away
here with any questions.
-Mike
On Fri, Sep 18, 2009 at 7:40 AM, Kaitlyn
wrote:
Just wondering from an efficiency standpoint:
I am building a widget out of javascript and so there is a lot of
HTML. Am I better off creating it as a string, then append() it into
the document, or should I build the widget itself using append() and
other related helper functions?
