jQuery speed: which one is faster, {ul#parent li} or {li.child}?

Question

Just curious if there is an established "best way" to target child elements inside of a parent element.

For example, if I want to create a click event on the children of a parent element, which one should be preferred?

a) give the parent element and id and do:

$('ul#parent li').click(function() {});

b) or, instead, give each of the children a class name and target them directly:

$('li.child').click(function() {});

I'm asking because I'm trying to squeeze out every bit of performance I can get in a somewhat large application. Logic would dictate that targeting an id is faster than targeting a classname, but does the parent > child structure negate that advantage and justify targeting by classname instead?

Thanks for any insight.

Answer 1

This would be the fastest option:

$('ul#parent li').click(function() {});

Always descend from an ID selector if possible.

However if you have a lot of <li> elements, it's cheaper to use .delegate(), like this:

$('#parent').delegate('li', 'click', function() { });

With .delegate() you're attaching one event handler instead of n (number of <li>) event handlers, one for each <li>. It works off listening for the click to bubble up to the <ul>, if startup time is killing you, this is a much better option. It's a tradeoff of startup time binding lots of handlers vs. the bubble cost (which is a very, very, very small cost). If you have lots of elements, this is almost always a better overall option.

Answer 2

Selector with id is faster because an id is supposed to be once per element per page rather than a class which can be assigned to multiple elements with same class name.

Answer 3

Selecting from an ID is faster. If you are doing selections based on that ID frequently it would be faster still to save it to a variable, say $ul_parent, and then base further selections on that variable, like

$ul_parent.children('li');

or

$('>li', $ul_parent); //same as above

This lets you use the fast selector, and cuts out some overhead for later selections. The second form isn't used very often, but the second parameter acts as a context for the selector in the first parameter so the jQuery function doesn't have to search the whole page. It just searches the already created jQ wrapper object.

Answer 4

While theoretically $('ul#parent li') is faster than $('li.child'), pratically there aren't much differences.

In a microbenchmark (http://jsbin.com/uwela/4) there is 1 <ul id="parent"> with 4096 <li class="child">'s, and 64 <ul> each with 64 <li>'s. On Firefox 3.6 on my machine, all $('ul#parent li'), $('#parent li'), $('li.child'), $('.child') take roughly 210 milliseconds to attach the onclick functions.

But then, the DOM on this test page is very shallow. Test it on your own page to be sure.