Hi,
I've done some profiling on this, and $("p", $("#foo")) is faster than
$("#foo p") in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 <p>s in a "foo" <div> and 900 <p>s in a
"bar" <div>.
However the factor differs dramatically:
In 1.2.6 the speedup from $("p", $("#foo")) to $("#foo p") was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$("p", $("#foo")) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $("#foo p") is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty "bar" div $("p", $("#foo")) is faster by a factor up to 3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat <ricardob...@gmail.com>:
>
> up to jQuery 1.2.6 that's how the selector engine worked (from the top
> down/left to right). The approach used in Sizzle (bottom up/right to
> left) has both benefits and downsides - it can be much faster on large
> DOMs and some situations, but slower on short queries. I'm sure
> someone can explain that in better detail.
>
> Anyway, in modern browsers most of the work is being delegated to the
> native querySelectorAll function, as so selector performance will
> become more of a browser makers' concern.
>
> - ricardo
>
> On Feb 23, 1:08 pm, Peter Bengtsson <pete...@gmail.com> wrote:
>> I watched the John Resig presentation too and learned that CSS
>> selectors always work from right to left.
>> That would mean that doing this::
>>
>> $('#foo p')
>>
>> Would extract all <p> tags and from that list subselect those who
>> belong to #foo. Suppose you have 1000 <p> tags of them only 100 are
>> inside #foo you'll have wasted 900 loops.
>>
>> Surely $('#foo') is the fastest lookup possible. Doing it this way
>> will effectively limit the scope of the $('p') search and you will
>> never be bothered about any <p> tags outside #foo.
>>
>> Or am I talking rubbish?
