@Karl: ohhhh, that was a serious c&p "bug"... :) I was aware that IE6
and 7 don't support getElementsByClassName (see my initial message),
still the results of my first test showed similar results for the
class selector. I hope I didn't have another c&p bug in there... ;)
@Mike: the pages I'm working on are rather simple (at least compared
to something like the Yahoo homepage). So I guess using
element.MyClass as a selector is fine for me. I already thought that
descending from the closest parent ID come into play, when you have a
lot of elements on your page.
Thanks guys!
On 3 Jul., 01:57, "Michael Geary" <m...@mg.to> wrote:
> 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
