You can't measure whether one selector will be faster than another on all
possible pages. All you can measure is which is faster on the page you're
testing.
On a page with only a single <a> element, an 'a.submit' or even just an 'a'
selector will be faster than '#content a.submit', because it's doing less
work. It will find that <a> element right away, and since that's the only
<a> element, you're done right there. Starting the search from #content
makes no difference except to take extra time.
Contrast that with a page with a thousand <a> elements, where only a few of
those elements (or just one) are inside the #content element. Now using
'#content a.submit' will pay off, because it saves jQuery from having to
scan through all the other <a> elements - it only has to look at the ones
inside the #content element.
This will vary by browser and by jQuery version, but the point to keep in
mind is that selectors perform differently in very complex pages - and of
course those are the pages where you care the most.
-Mike
> From: olsch01
>
> Hi Karl,
>
> thanks for your reply.
>
> I used jQuery tester in FF2 + 3, IE6, 7 + 8, Opera 9.64 and I
> think also in Safari 4 (on my Win XP machine). The results
> were are all kinda similar. Using the class selector was
> always fastest.
>
> I just ran the following test (choosing jQuery 1.3.2 again):
>
> test('#content a.submit');
> test('a.submit');
> test('.submit');
> test('("#myDiv").find("span.myClass")');
>
> The results in FF3:
>
> #content a.submit: 0.448s
> a.submit: 0.344s
> .submit: 0.331s
> ("#myDiv").find("span.myClass"): 0.399s
>
> The results for IE are a bit strange and different from my
> earlier results.
>
> IE6:
>
> #content a.submit: 1.641s
> a.submit: 1.438s
> .submit: 4.172s
> ("#myDiv").find("span.myClass"): 4.484s
>
> IE7 (IE Tester tool):
>
> #content a.submit: 2.046s
> a.submit: 1.922s
> .submit: 4.969s
> ("#myDiv").find("span.myClass"): 4.562s
>
> IE8 (also IE Tester tool):
>
> #content a.submit: 0.25s
> a.submit: 0.219s
> .submit: 0.219s
> ("#myDiv").find("span.myClass"): 3.578s
>
> So only using the class name is much slower here.
>
> Looking at my earlier test and this one, "a.submit" (i.e.
> element.myClass) has shown the best overall performance .
>
> Any comments? :)
>
> Cheers
>
>
> On 2 Jul., 19:36, Karl Swedberg <k...@englishrules.com> wrote:
> > On Jul 2, 2009, at 8:45 AM, north wrote:
> >
> >
> >
> >
> >
> > > Hi,
> >
> > > I just tested all my jQuery selectors using the jQuery Tester
> > > (http:// jquery.nodnod.net), and the results seem to "contradict"
> > > one thing I read in a performance article: that you
> should descend
> > > from the closest parent ID when using classes in your
> selector (the
> > > article says "April 09", so the latest jQuery version was
> already available).
> >
> > > In my tests, using just the class selector (like
> span.myClass) was
> > > always fastest (sometimes twice as fast as #myDiv
> span.myClass), and
> > > this in all browsers I tested, not just the ones supporting
> > > getElementsByClassName.
> >
> > > Maybe descending from the closest parent ID becomes a factor when
> > > you have a lot of elements on you page? Any experiences?
> >
> > > Thanks
> >
> > If the selectors aren't causing a discernible bottleneck, I
> wouldn't
> > worry too much about optimizing them. Just out of
> curiosity, though,
> > what happens if you do this:
> >
> > $('#myDiv').find('span.myClass');
> >
> > any faster?
> >
> > Also, which browser are you testing?
> >
> > --Karl
>
