Re: [jQuery] Optimizing DOM Traversal

[Sam Collett]

On 18/12/06, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> Ok, so I put together a little test page at
> http://test.learningjquery.com/speed-test.htm
>
> I run the following queries, using .click() and checking the difference
> between the time they start and the time they end (on FF2 Mac):
> $(.dialog)
> $(div.dialog)
> $(div).filter('.dialog')
>
> There are 49 DIVs with class="dialog" on the page.
>
> $(.dialog) averages ~30 milliseconds
> $(div.dialog) and $(div).filter('.dialog') usually clock in
> around 19-20 milliseconds
>
> The first one to be clicked typically takes about 10ms longer than
> subsequent clicks on it.
>
> Here is the really weird part:
> On every 7th click, the query will take 70 - 85 milliseconds, no matter
> which one is clicked or what the order is.
>
> I figure there must be something really stupid about the way I'm doing this.
>  All the code is in the , so feel free to take a look, and if it's
> really dumb, post to the list and let everyone know to disregard these
> numbers. If it's not so dumb and someone wants to test it on another
> system/browser, I'd be interested to hear what your results are.
>
>
> --Karl
> _
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com

The seven click bug does not exist in IE7. The speeds are about the
same (about 10ms slower than you) in both Firefox and IE. If you
change tabs on the sixth click and then go back, there is not the big
jump.

$('.dialog') - alternates between 47 and 62 and up to 156/172/187
$('div.dialog') - 31/32 and 15/16 up to 141/156
$('div').filter('.dialog') - same as div.dialog

It does show that selecting using a tag is marginally faster, but not
fast enough to really notice (but you may notice on a really
complicated page (which won't exist if you use good markup and try to
limit the number of tables)).

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Karl Swedberg]

On Dec 18, 2006, at 1:05 PM, Jörn Zaefferer wrote:


I can confirm those numbers. The seventh click is really weird. It
doesn't even matter in which sequence you run those queries, be it  
"1 2

3 1 2 3 1", it's always the seventh click that takes longer.


Well, at least I know now that I'm not crazy. It really was happening!


Could you add some tests with IDs? Eg. #id, div#id, div#id.class.


Absolutely. Work is crazy busy today, but I'll put the new tests up  
tonight. Ah, if only I could quit my day job... :)


--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Jörn Zaefferer]

Karl Swedberg schrieb:
> Ok, so I put together a little test page at 
> http://test.learningjquery.com/speed-test.htm
>
> I run the following queries, using .click() and checking the 
> difference between the time they start and the time they end (on FF2 Mac):
> $(.dialog)
> $(div.dialog)
> $(div).filter('.dialog')
>
> There are 49 DIVs with class="dialog" on the page.
>
> $(.dialog) averages ~30 milliseconds
> $(div.dialog) and $(div).filter('.dialog') usually clock in around 
> 19-20 milliseconds
>
> The first one to be clicked typically takes about 10ms longer than 
> subsequent clicks on it.
>
> Here is the really weird part: 
> On every 7th click, the query will take 70 - 85 milliseconds, no 
> matter which one is clicked or what the order is.
>
> I figure there must be something really stupid about the way I'm doing 
> this.  All the code is in the , so feel free to take a look, and 
> if it's really dumb, post to the list and let everyone know to 
> disregard these numbers. If it's not so dumb and someone wants to test 
> it on another system/browser, I'd be interested to hear what your 
> results are.
I can confirm those numbers. The seventh click is really weird. It 
doesn't even matter in which sequence you run those queries, be it "1 2 
3 1 2 3 1", it's always the seventh click that takes longer.

Could you add some tests with IDs? Eg. #id, div#id, div#id.class.

-- 
Jörn Zaefferer

http://bassistance.de


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Juha Suni]

Interesting indeed.

The 7th click seems to take up to 5 or 6 times longer than other clicks. 
Anyone here with some idea what FF is doing there? I find it hard to believe 
their method of doing javascript garbage collection would be in the lines of 
"let's do it every umm... seventh click the user does?".

I am currently in the process of doing major javascript optimizations on out 
app, and would really like to hear what causes this.

-- 
Suni

Stephen Woodbridge wrote:
> You guys have fast machines!
>
> I get 47-63 on $(.dialog) with the 7th being 172 ms.
>
> I guessing, but I think the 7th click is also triggering some garbage
> collection.
>
> Running FF 2.0 on WinNT.
>
> -Steve
>
> Ⓙⓐⓚⓔ wrote:


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Stephen Woodbridge]

You guys have fast machines!

I get 47-63 on $(.dialog) with the 7th being 172 ms.

I guessing, but I think the 7th click is also triggering some garbage 
collection.

Running FF 2.0 on WinNT.

-Steve

Ⓙⓐⓚⓔ wrote:
> I ran your test in ff 2, very similar numbers, including the 7 click 
> silliness !! (your machine is a little faster than mine). But in Safari, 
> all the queries were approximately the same! and No "every 7 click 
> problem"!
> 
> On 12/17/06, *Karl Swedberg* <[EMAIL PROTECTED] 
> > wrote:
> 
> Ok, so I put together a little test page at
> http://test.learningjquery.com/speed-test.htm
> 
> 
> I run the following queries, using .click() and checking the
> difference between the time they start and the time they end (on FF2
> Mac):
> $(.dialog)
> $(div.dialog)
> $(div).filter('.dialog')
> 
> There are 49 DIVs with class="dialog" on the page.
> 
> $(.dialog) averages ~30 milliseconds
> $(div.dialog) and $(div).filter('.dialog') usually clock in around
> 19-20 milliseconds
> 
> The first one to be clicked typically takes about 10ms longer than
> subsequent clicks on it.
> 
> Here is the really weird part: 
> On every 7th click, the query will take 70 - 85 milliseconds, no
> matter which one is clicked or what the order is.
> 
> I figure there must be something really stupid about the way I'm
> doing this.  All the code is in the , so feel free to take a
> look, and if it's really dumb, post to the list and let everyone
> know to disregard these numbers. If it's not so dumb and someone
> wants to test it on another system/browser, I'd be interested to
> hear what your results are. 
> 
> --Karl
> _
> Karl Swedberg
> www.englishrules.com 
> www.learningjquery.com 
> 
> 
> 
> On Dec 17, 2006, at 8:48 PM, Stephen Woodbridge wrote:
> 
>> I seem to remember seeing that post also and having done a lot of 
>> testing in other jobs it is easy to make tests the are not 
>> representative, misleading, or distort reality, etc. However this
>> is not 
>> an excuse for not developing tests, it should be just a caution
>> that you 
>> need to be aware of what you are measuring.
>>
>> Having some standard tests that compare different searches using some 
>> standard, that ever that might be, complexity pages, may not reflect 
>> real-life queries, but it would give us some standards to compare 
>> against from version to version and if we find cases that are not
>> well 
>> represented then we can add more cases.
>>
>> My $.02,
>>-Steve
>>
>> Karl Swedberg wrote:
>>> I'd like to see some real benchmarks on this, too. Is it possible
>>> to rig  
>>> up the test suite to do something like that? 
>>>
>>> On the other hand, won't the speeds (and the respective
>>> difference in  
>>> speeds) depend to some extent on the complexity of the page?
>>>
>>> I seem to recall having read a pretty convincing argument by
>>> someone on  
>>> this list (Michael Geary maybe?) about the unreliability of speed 
>>> benchmarks, but I could be confusing it with some other loosely
>>> related  
>>> matter.
>>>
>>> --Karl
>>> _
>>> Karl Swedberg
>>> www.englishrules.com 
>>> www.learningjquery.com 
>>>
>>>
>>>
>>> On Dec 17, 2006, at 6:51 PM, Sam Collett wrote:
>>>
 Has anyone done any benchmarks to compare the speeds of using
 different expressions? Like how much faster $(" a.myclass") is than
 $(".myclass") and the difference, if any, between
 $("a").filter(".myclass") and $("a.myclass") etc.


> 
> 
> ___
> jQuery mailing list
> discuss@jquery.com 
> http://jquery.com/discuss/
> 
> 
> 
> 
> 
> -- 
> Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ
> 
> 
> 
> 
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Ⓙⓐⓚⓔ]

I ran your test in ff 2, very similar numbers, including the 7 click
silliness !! (your machine is a little faster than mine). But in Safari, all
the queries were approximately the same! and No "every 7 click problem"!

On 12/17/06, Karl Swedberg <[EMAIL PROTECTED]> wrote:


Ok, so I put together a little test page at
http://test.learningjquery.com/speed-test.htm
I run the following queries, using .click() and checking the difference
between the time they start and the time they end (on FF2 Mac):
$(.dialog)
$(div.dialog)
$(div).filter('.dialog')

There are 49 DIVs with class="dialog" on the page.

$(.dialog) averages ~30 milliseconds
$(div.dialog) and $(div).filter('.dialog') usually clock in around 19-20
milliseconds

The first one to be clicked typically takes about 10ms longer than
subsequent clicks on it.

Here is the really weird part:
On every 7th click, the query will take 70 - 85 milliseconds, no matter
which one is clicked or what the order is.

I figure there must be something really stupid about the way I'm doing
this.  All the code is in the , so feel free to take a look, and if
it's really dumb, post to the list and let everyone know to disregard these
numbers. If it's not so dumb and someone wants to test it on another
system/browser, I'd be interested to hear what your results are.

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 8:48 PM, Stephen Woodbridge wrote:

I seem to remember seeing that post also and having done a lot of
testing in other jobs it is easy to make tests the are not
representative, misleading, or distort reality, etc. However this is not
an excuse for not developing tests, it should be just a caution that you
need to be aware of what you are measuring.

Having some standard tests that compare different searches using some
standard, that ever that might be, complexity pages, may not reflect
real-life queries, but it would give us some standards to compare
against from version to version and if we find cases that are not well
represented then we can add more cases.

My $.02,
   -Steve

Karl Swedberg wrote:

I'd like to see some real benchmarks on this, too. Is it possible to rig
up the test suite to do something like that?

On the other hand, won't the speeds (and the respective difference in
speeds) depend to some extent on the complexity of the page?

I seem to recall having read a pretty convincing argument by someone on
this list (Michael Geary maybe?) about the unreliability of speed
benchmarks, but I could be confusing it with some other loosely related
matter.

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 6:51 PM, Sam Collett wrote:

Has anyone done any benchmarks to compare the speeds of using
different expressions? Like how much faster $("a.myclass") is than
$(".myclass") and the difference, if any, between
$("a").filter(".myclass") and $("a.myclass") etc.




___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/






--
Ⓙⓐⓚⓔ - יעקב   ʝǡǩȩ   ᎫᎪᏦᎬ
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Karl Swedberg]

Ok, so I put together a little test page at http:// 
test.learningjquery.com/speed-test.htm


I run the following queries, using .click() and checking the  
difference between the time they start and the time they end (on FF2  
Mac):

$(.dialog)
$(div.dialog)
$(div).filter('.dialog')

There are 49 DIVs with class="dialog" on the page.

$(.dialog) averages ~30 milliseconds
$(div.dialog) and $(div).filter('.dialog') usually clock in around  
19-20 milliseconds


The first one to be clicked typically takes about 10ms longer than  
subsequent clicks on it.


Here is the really weird part:
On every 7th click, the query will take 70 - 85 milliseconds, no  
matter which one is clicked or what the order is.


I figure there must be something really stupid about the way I'm  
doing this.  All the code is in the , so feel free to take a  
look, and if it's really dumb, post to the list and let everyone know  
to disregard these numbers. If it's not so dumb and someone wants to  
test it on another system/browser, I'd be interested to hear what  
your results are.


--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 8:48 PM, Stephen Woodbridge wrote:


I seem to remember seeing that post also and having done a lot of
testing in other jobs it is easy to make tests the are not
representative, misleading, or distort reality, etc. However this  
is not
an excuse for not developing tests, it should be just a caution  
that you

need to be aware of what you are measuring.

Having some standard tests that compare different searches using some
standard, that ever that might be, complexity pages, may not reflect
real-life queries, but it would give us some standards to compare
against from version to version and if we find cases that are not well
represented then we can add more cases.

My $.02,
   -Steve

Karl Swedberg wrote:
I'd like to see some real benchmarks on this, too. Is it possible  
to rig

up the test suite to do something like that?

On the other hand, won't the speeds (and the respective difference in
speeds) depend to some extent on the complexity of the page?

I seem to recall having read a pretty convincing argument by  
someone on

this list (Michael Geary maybe?) about the unreliability of speed
benchmarks, but I could be confusing it with some other loosely  
related

matter.

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 6:51 PM, Sam Collett wrote:


Has anyone done any benchmarks to compare the speeds of using
different expressions? Like how much faster $("a.myclass") is than
$(".myclass") and the difference, if any, between
$("a").filter(".myclass") and $("a.myclass") etc.




___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Stephen Woodbridge]

I seem to remember seeing that post also and having done a lot of 
testing in other jobs it is easy to make tests the are not 
representative, misleading, or distort reality, etc. However this is not 
an excuse for not developing tests, it should be just a caution that you 
need to be aware of what you are measuring.

Having some standard tests that compare different searches using some 
standard, that ever that might be, complexity pages, may not reflect 
real-life queries, but it would give us some standards to compare 
against from version to version and if we find cases that are not well 
represented then we can add more cases.

My $.02,
   -Steve

Karl Swedberg wrote:
> I'd like to see some real benchmarks on this, too. Is it possible to rig 
> up the test suite to do something like that? 
> 
> On the other hand, won't the speeds (and the respective difference in 
> speeds) depend to some extent on the complexity of the page?
> 
> I seem to recall having read a pretty convincing argument by someone on 
> this list (Michael Geary maybe?) about the unreliability of speed 
> benchmarks, but I could be confusing it with some other loosely related 
> matter.
> 
> --Karl
> _
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
> 
> 
> 
> On Dec 17, 2006, at 6:51 PM, Sam Collett wrote:
> 
>> Has anyone done any benchmarks to compare the speeds of using
>> different expressions? Like how much faster $("a.myclass") is than
>> $(".myclass") and the difference, if any, between
>> $("a").filter(".myclass") and $("a.myclass") etc.
>>
>> ___
>> jQuery mailing list
>> discuss@jquery.com 
>> http://jquery.com/discuss/
> 
> 
> 
> 
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Karl Swedberg]

I'd like to see some real benchmarks on this, too. Is it possible to  
rig up the test suite to do something like that?


On the other hand, won't the speeds (and the respective difference in  
speeds) depend to some extent on the complexity of the page?


I seem to recall having read a pretty convincing argument by someone  
on this list (Michael Geary maybe?) about the unreliability of speed  
benchmarks, but I could be confusing it with some other loosely  
related matter.


--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 6:51 PM, Sam Collett wrote:


Has anyone done any benchmarks to compare the speeds of using
different expressions? Like how much faster $("a.myclass") is than
$(".myclass") and the difference, if any, between
$("a").filter(".myclass") and $("a.myclass") etc.

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Sam Collett]

Has anyone done any benchmarks to compare the speeds of using
different expressions? Like how much faster $("a.myclass") is than
$(".myclass") and the difference, if any, between
$("a").filter(".myclass") and $("a.myclass") etc.

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Karl Swedberg]

On Dec 17, 2006, at 2:24 PM, Yehuda Katz wrote:

$('#id').find('.class > .otherClass tr#id td') would be equally  
optimized as $("#id .class > .otherClass #tr#id td"), so that  
wasn't the situation I was talking about ;)



Sure, of course. My clarification was not so much directed towards  
you, but rather towards others who might not understand all of the  
subtle distinctions yet.


One other thing -- and I'm sorry if I seem nitpicky, but this is  
again more for the benefit of those who might want to cut and paste  
or something -- is that your example should have "tr#id" instead of  
"#tr#id"


Cheers,

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 2:24 PM, Yehuda Katz wrote:




On 12/17/06, Karl Swedberg <[EMAIL PROTECTED]> wrote:
thanks, everyone, for the suggestions and questions.

regarding Yehuda's suggestion:
$(".class > .otherClass tr#id td#id") into $("#id").filter(".class  
> .otherClass tr#id td")


a small clarification: If #id is an ancestor of .class, we'd  
probably want to use .find() instead of .filter() . . .


  $('#id').find('.class > .otherClass tr#id td')

$('#id').find('.class > .otherClass tr#id td') would be equally  
optimized as $("#id .class > .otherClass #tr#id td"), so that  
wasn't the situation I was talking about ;)


-- Yehuda

Also, a hat tip to Aaron Heimlich, who blogged about this issue,  
unbeknownst to me at the time, before I did.

http://aheimlich.freepgs.com/javascript/jquery-selector-speed/

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 8:53 AM, Yehuda Katz wrote:


It was a typo. My apologies.

A more robust solution might be to use filter:

$(".class > .otherClass tr#id td#id") into $("#id").filter(".class  
> .otherClass tr#id td")


On 12/17/06, Klaus Hartl <[EMAIL PROTECTED]> wrote:
Felix Geisendörfer schrieb:
> Quick question:
>> $(".class > .otherClass tr#id td#id") into $("#id").id(".class >
>> .otherClass tr#id td")
> Does this work? Or should the function be 'is' not 'id'?
>
> $(".class > .otherClass tr#id td#id") into $("#id").is(".class >
> .otherClass tr#id td")
>
> I'm just wondering because I thought the 'id' function is used  
to set

> the 'id' attribute of an element.

I think that's a typo. Still it's not the same, because is()  
returns a

boolean.


-- Klaus

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/



--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/





--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Yehuda Katz]

On 12/17/06, Karl Swedberg <[EMAIL PROTECTED]> wrote:


thanks, everyone, for the suggestions and questions.

regarding Yehuda's suggestion:

$(".class > .otherClass tr#id td#id") into $("#id").filter(".class >
.otherClass tr#id td")


a small clarification: If #id is an ancestor of .class, we'd probably want
to use .find() instead of .filter() . . .
  $('#id').find('.class > .otherClass tr#id td')



$('#id').find('.class > .otherClass tr#id td') would be equally optimized as
$("#id .class > .otherClass #tr#id td"), so that wasn't the situation I was
talking about ;)

-- Yehuda

Also, a hat tip to Aaron Heimlich, who blogged about this issue, unbeknownst

to me at the time, before I did.
http://aheimlich.freepgs.com/javascript/jquery-selector-speed/

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 8:53 AM, Yehuda Katz wrote:

It was a typo. My apologies.

A more robust solution might be to use filter:

$(".class > .otherClass tr#id td#id") into $("#id").filter(".class >
.otherClass tr#id td")

On 12/17/06, Klaus Hartl <[EMAIL PROTECTED]> wrote:
>
> Felix Geisendörfer schrieb:
> > Quick question:
> >> $(".class > .otherClass tr#id td#id") into $("#id").id(".class >
> >> .otherClass tr#id td")
> > Does this work? Or should the function be 'is' not 'id'?
> >
> > $(".class > .otherClass tr#id td#id") into $("#id").is(".class >
> > .otherClass tr#id td")
> >
> > I'm just wondering because I thought the 'id' function is used to set
> > the 'id' attribute of an element.
>
> I think that's a typo. Still it's not the same, because is() returns a
> boolean.
>
>
> -- Klaus
>
> ___
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>



--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/






--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Karl Swedberg]

thanks, everyone, for the suggestions and questions.

regarding Yehuda's suggestion:
$(".class > .otherClass tr#id td#id") into $("#id").filter(".class  
> .otherClass tr#id td")


a small clarification: If #id is an ancestor of .class, we'd probably  
want to use .find() instead of .filter() . . .


  $('#id').find('.class > .otherClass tr#id td')

Also, a hat tip to Aaron Heimlich, who blogged about this issue,  
unbeknownst to me at the time, before I did.

http://aheimlich.freepgs.com/javascript/jquery-selector-speed/

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Dec 17, 2006, at 8:53 AM, Yehuda Katz wrote:


It was a typo. My apologies.

A more robust solution might be to use filter:

$(".class > .otherClass tr#id td#id") into $("#id").filter(".class  
> .otherClass tr#id td")


On 12/17/06, Klaus Hartl <[EMAIL PROTECTED]> wrote:
Felix Geisendörfer schrieb:
> Quick question:
>> $(".class > .otherClass tr#id td#id") into $("#id").id(".class >
>> .otherClass tr#id td")
> Does this work? Or should the function be 'is' not 'id'?
>
> $(".class > .otherClass tr#id td#id") into $("#id").is(".class >
> .otherClass tr#id td")
>
> I'm just wondering because I thought the 'id' function is used to  
set

> the 'id' attribute of an element.

I think that's a typo. Still it's not the same, because is() returns a
boolean.


-- Klaus

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/



--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Yehuda Katz]

It was a typo. My apologies.

A more robust solution might be to use filter:

$(".class > .otherClass tr#id td#id") into $("#id").filter(".class >
.otherClass tr#id td")

On 12/17/06, Klaus Hartl <[EMAIL PROTECTED]> wrote:


Felix Geisendörfer schrieb:
> Quick question:
>> $(".class > .otherClass tr#id td#id") into $("#id").id(".class >
>> .otherClass tr#id td")
> Does this work? Or should the function be 'is' not 'id'?
>
> $(".class > .otherClass tr#id td#id") into $("#id").is(".class >
> .otherClass tr#id td")
>
> I'm just wondering because I thought the 'id' function is used to set
> the 'id' attribute of an element.

I think that's a typo. Still it's not the same, because is() returns a
boolean.


-- Klaus

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/





--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Klaus Hartl]

Felix Geisendörfer schrieb:
> Quick question:
>> $(".class > .otherClass tr#id td#id") into $("#id").id(".class > 
>> .otherClass tr#id td")
> Does this work? Or should the function be 'is' not 'id'?
> 
> $(".class > .otherClass tr#id td#id") into $("#id").is(".class > 
> .otherClass tr#id td")
> 
> I'm just wondering because I thought the 'id' function is used to set 
> the 'id' attribute of an element.

I think that's a typo. Still it's not the same, because is() returns a 
boolean.


-- Klaus

___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Felix Geisendörfer]

Quick question:
$(".class > .otherClass tr#id td#id") into $("#id").id(".class > 
.otherClass tr#id td")

Does this work? Or should the function be 'is' not 'id'?

$(".class > .otherClass tr#id td#id") into $("#id").is(".class > 
.otherClass tr#id td")


I'm just wondering because I thought the 'id' function is used to set 
the 'id' attribute of an element.


-- Felix

PS: Insightful posts, definitely good stuff. Thanks @ Karl for getting 
this going and doing a blog post!

--
http://www.thinkingphp.org
http://www.fg-webdesign.de


Yehuda Katz wrote:



On 12/16/06, *David* <[EMAIL PROTECTED] 
> wrote:


I asked that question a few days ago, so i will pass the knowledge :)

>
> 1, $('#id')
calls the javascript function getElementById so that is the fastest.
> 2, $('tag#id')
is slow because jquery gets all the tags first and then searches
for the id 




A possible way to speed up $("tag#id") is to do $("#id").is("tag")

That will first run getElementById, and then test if it matches the 
selector.


You would probably see dramatic speed gains by converting something like:

$(".class > .otherClass tr#id td#id") into $("#id").id(".class > 
.otherClass tr#id td")


since a search by ID at any point is really just a search by ID which 
also tests whether that node matches the early selectors/filters.
 


>
> 3, $('.class',context)
the performance depends on the context 



Well sort of.  $(".class", context) where context is $("#id")[0] is 
the same thing as $("#id .class")


> 4, $('#id .class')
> 5, $('.class1 .class2')
4 is faster than 5 because of the getElementById function


Indeed. 4 is way faster than 5. Anytime you can narrow something down 
by ID, do it. getElementById is blazingly fast, and will help all around.


This is was i understood from the answers. Correct me if i made a
mistake somewhere.


David



___
jQuery mailing list
discuss@jquery.com 
http://jquery.com/discuss/ 




--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325


___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
  
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Yehuda Katz]

On 12/16/06, David <[EMAIL PROTECTED]> wrote:


I asked that question a few days ago, so i will pass the knowledge :)

>
> 1, $('#id')
calls the javascript function getElementById so that is the fastest.
> 2, $('tag#id')
is slow because jquery gets all the tags first and then searches for the
id




A possible way to speed up $("tag#id") is to do $("#id").is("tag")

That will first run getElementById, and then test if it matches the
selector.

You would probably see dramatic speed gains by converting something like:

$(".class > .otherClass tr#id td#id") into $("#id").id(".class > .otherClass
tr#id td")

since a search by ID at any point is really just a search by ID which also
tests whether that node matches the early selectors/filters.




> 3, $('.class',context)
the performance depends on the context



Well sort of.  $(".class", context) where context is $("#id")[0] is the same
thing as $("#id .class")


4, $('#id .class')
> 5, $('.class1 .class2')
4 is faster than 5 because of the getElementById function



Indeed. 4 is way faster than 5. Anytime you can narrow something down by ID,
do it. getElementById is blazingly fast, and will help all around.

This is was i understood from the answers. Correct me if i made a

mistake somewhere.


David



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/





--
Yehuda Katz
Web Developer | Wycats Designs
(ph)  718.877.1325
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[David]

I asked that question a few days ago, so i will pass the knowledge :)

>
> 1, $('#id')
calls the javascript function getElementById so that is the fastest.
> 2, $('tag#id')
is slow because jquery gets all the tags first and then searches for the id
>
> 3, $('.class',context)
the performance depends on the context
> 4, $('#id .class')
> 5, $('.class1 .class2')
4 is faster than 5 because of the getElementById function

This is was i understood from the answers. Correct me if i made a 
mistake somewhere.


David



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Re: [jQuery] Optimizing DOM Traversal

[Linan Wang]

hi Karl,

It's very necessary to know the performance of different selector. Can you
please explain more about the difference among following expression?
1, $('#id')
2, $('tag#id')

3, $('.class',context)
4, $('#id .class')
5, $('.class1 .class2')

On 12/16/06, Karl Swedberg <[EMAIL PROTECTED]> wrote:


Hey everyone,
I try not to spam the list with announcements about my learning jquery
posts, figuring that if you want to read them you'll subscribe to the feed.
However, the entry I just posted has to do with optimizing DOM traversal,
which is a subject that comes up a lot on this mailing list, so I want to
make sure I'm not leading anyone astray or misrepresenting anything:

http://www.learningjquery.com/2006/12/quick-tip-optimizing-dom-traversal

If anyone has time to take a quick look at the entry and check it over for
inaccuracies, I would greatly appreciate it. If you'd like to add, improve,
or correct something, feel free to respond in a comment, reply to this
email, or drop me a note offline and I'll fix things up.

Thanks!

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com




___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/






--
Best regards

Linan Wang
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

[jQuery] Optimizing DOM Traversal

[Karl Swedberg]

Hey everyone,

I try not to spam the list with announcements about my learning  
jquery posts, figuring that if you want to read them you'll subscribe  
to the feed. However, the entry I just posted has to do with  
optimizing DOM traversal, which is a subject that comes up a lot on  
this mailing list, so I want to make sure I'm not leading anyone  
astray or misrepresenting anything:


http://www.learningjquery.com/2006/12/quick-tip-optimizing-dom-traversal

If anyone has time to take a quick look at the entry and check it  
over for inaccuracies, I would greatly appreciate it. If you'd like  
to add, improve, or correct something, feel free to respond in a  
comment, reply to this email, or drop me a note offline and I'll fix  
things up.


Thanks!

--Karl
_
Karl Swedberg
www.englishrules.com
www.learningjquery.com



___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/