I re-ran the test now.
test('#content a.submit');
test('a.submit');
test('.submit');
test('("#content").find("a.submit")');
Basically I get the same result: for my pages (!) element.MyClass has
the best average performance.
I guess it's as Karl mentioned earlier: "If the selectors aren't
causing a discernible bottleneck, I wouldn't worry too much about
optimizing them."
But it's interesting to play around with those tests. :)
Cheers
On 3 Jul., 09:28, olsch01 <ollo...@web.de> wrote:
> @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
