jQuery selector performance / jQuery Tester

[north-6]

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

[Karl Swedberg-2]

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

[north-6]

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...@...> 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

[Karl Swedberg-2]

If you're doing this:

 test('#content a.submit'); 

then you shouldn't compare it to this:

 test('("#myDiv").find("span.myClass")');

that's "apples to oranges." instead, compare it to this:

 test('("#content").find("a.submit")');

The reason the other browsers are so much faster than IE 6 and 7with bare class names is that they have support for .getElementsByClassName() and .querySelectorAll() 

--Karl

____________

Karl Swedberg

www.englishrules.com

www.learningjquery.com

On Jul 2, 2009, at 3:53 PM, olsch01 wrote:

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...@...> 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

[Michael Geary-3]

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...@...> 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
>

[north-6]

@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...@...> 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...@...> 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

[north-6]

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...@...> 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...@...> 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...@...> 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