[jQuery] Re: $('#foo p') or $('p', $('#foo'))
On Feb 27, 12:42 am, John Resig jere...@gmail.com wrote: The benchmark is getElementById().getElementsByTagName() - why not inlcude that in the test? But it's not that simple (it never is). That code doesn't take into account browsers, like IE, returning element that have a name equal to the ID, There is a simple solution for that: don't create elements with a name equal to some other element's id. not does it take into account the element (with the ID) not existing, Of course production code would test the return from getElementById if there is any doubt that the element exists, this is a benchmarking exercise and the extra test is irrelevant for that. nor does it return a static list of elements - it returns a live NodeSet (which is a constant source of misconceptions for developers). I don't think a method that's hugely faster should be ignored because some programmers don't understand NodeLists. It's a speed benchmark. If you want to play the cross-browser roulette, make sure you go all the way in. There is one cross-browser issue here and that is easily dealt with, there is no need to saddle everyone with slow logic because of the idiosyncrasies of two browsers, particularly when other solutions are available. In any case, the additional code to resolve the name/id issue would not affect its use as a benchmark as it is a one-of bit of code to get a single element (and the name/id resolution path should never be taken on browsers that don't have the issue), the real effort is getting the collection of child nodes. -- Rob
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
For anyone interested, here is the updated set of 'tests' for the test
page I posted previously. This is the test-set John is currently
using:
// Test # 1
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $(p, #div+ myDiv);
end = new Date();
a_Selectors.push('$(p, #div'+ myDiv +')');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $(#div+ myDiv).find(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').find(p)');
a_Times.push(end - start);
// Test # 4
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 5
start = new Date();
$Test = $(#div+ myDiv).children(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').children(p)');
a_Times.push(end - start);
// Test # 6
start = new Date();
$Test = $($(#div+ myDiv)[0].childNodes).filter(p);
end = new Date();
a_Selectors.push('$( $(#div'+ myDiv +')[0].childNodes ).filter
(p)');
a_Times.push(end - start);
If you created your own test page, just copy-n-paste these tests into
it.
NOTE that setting: 'c_divs=1000' and 'c_paras=500' (as John is using)
makes the page very slow to load because it has to generate all these
elements. So for quick tests, reduce these numbers to 100 each. But if
you find something interesting, try cranking the numbers up again - it
magnifies the speed differences between the tests.
/Kevin
On Feb 25, 6:48 pm, RobG rg...@iinet.net.au wrote:
On Feb 26, 11:22 am, John Resig jere...@gmail.com wrote:
The benchmark is getElementById().getElementsByTagName() - why not
inlcude that in the test? Add the following below test 3:
// Test # 4
start = new Date();
$Test = document.getElementById('div' +
myDiv).getElementsByTagName('p');
end = new Date();
a_Selectors.push('getEBI().getEBTName()');
a_Times.push(end - start);
--
Rob
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
You maybe know this, but there's a great website that compares compatibility in different popular browsers: http://www.quirksmode.org/dom/w3c_core.html I've noticed lately to the querySelectorAll method. Looks promising :) more to see here: http://www.quirksmode.org/compatibility.html -- Dor On Feb 26, 4:42 pm, John Resig jere...@gmail.com wrote: The benchmark is getElementById().getElementsByTagName() - why not inlcude that in the test? But it's not that simple (it never is). That code doesn't take into account browsers, like IE, returning element that have a name equal to the ID, not does it take into account the element (with the ID) not existing, nor does it return a static list of elements - it returns a live NodeSet (which is a constant source of misconceptions for developers). If you want to play the cross-browser roulette, make sure you go all the way in. --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
The benchmark is getElementById().getElementsByTagName() - why not inlcude that in the test? But it's not that simple (it never is). That code doesn't take into account browsers, like IE, returning element that have a name equal to the ID, not does it take into account the element (with the ID) not existing, nor does it return a static list of elements - it returns a live NodeSet (which is a constant source of misconceptions for developers). If you want to play the cross-browser roulette, make sure you go all the way in. --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
John wrote: You should always use $(#foo).find(p) in favor of $
(p, $(#foo))
I'm trying to extrapolate some general concepts from this 'rule'...
First, I *assume* these two statements are identical in performance:
$(p, $(#foo)) == $(p, #foo)
If so, then does it matter what the scope selector is? What if the
scope is *not an ID*, and therefore not as fast to find, like::
$(div.myClass).find(p) in favor of $(p, div.myClass) ???
If this is still true, then my understanding is that $(a).find(b)
syntax is ALWAYS faster than $(a, b)???
IF it is true that find() is always faster - or at least equal - to
specifying a scope selector/element, then it would seem that jQuery
should simply use the find() flow internally when a scope selector is
specfied. In other words, when a scope selector/element is specified,
find this element first and then 'call' the same method used for find
() - ie:
*** internally ***
$(p, $(#foo)) == $(#foo).find(p)
I can't think of any excepts to this - the result should always be
identical? If so, and performance is equal or superior, then *why not*
do this internally so the two statements above essentially become 100%
identical? It would just be two ways of expressing the same thing,
which is how it appears to users.
Am I off-base here? If so, which assumuption above breaks down?
Even if there is a good reason to treat the syntax differently
internally, I'm still interested to know if I should avoid using scope
selectors in favor of find() ***under all conditions*** - or only
under specific conditions?
/Kevin
On Feb 24, 5:58 pm, John Resig jere...@gmail.com wrote:
I want to point out a couple things:
1) You should always use $(#foo).find(p) in favor of $(p, $
(#foo)) - the second one ends up executing $(...) 3 times total -
only to arrive at the same result as doing $(#foo).find(p).
2) I generally dislike saying that there's one good way to do a
selector (especially with one that has such bad syntax, as above) -
especially since it may not always be that way.
In fact, I've already filed a bug and I'll be looking in to this
issue, possibly resolving it tonight or tomorrow - at which point the
advice will be false again.http://dev.jquery.com/ticket/4236
My recommendation is to always write the simplest, easiest to
understand, expression: jQuery will try to do the rest to optimize it.
--John
On Feb 24, 10:23 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same
speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling
$('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
First, I *assume* these two statements are identical in performance:
$(p, $(#foo)) == $(p, #foo)
No -- the first one calls jQuery three times, the second one twice. Big
difference.
Now, I'm not sure about if it's faster to use find() than the context
selector. I would think under the hood it's doing the same thing, and the
context argument is just a handy shortcut.
-- Josh
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Kevin Dalman
Sent: Wednesday, February 25, 2009 10:41 AM
To: jQuery (English)
Subject: [jQuery] Re: $('#foo p') or $('p', $('#foo'))
John wrote: You should always use $(#foo).find(p) in favor of $
(p, $(#foo))
I'm trying to extrapolate some general concepts from this 'rule'...
If so, then does it matter what the scope selector is? What if the
scope is *not an ID*, and therefore not as fast to find, like::
$(div.myClass).find(p) in favor of $(p, div.myClass) ???
If this is still true, then my understanding is that $(a).find(b)
syntax is ALWAYS faster than $(a, b)???
IF it is true that find() is always faster - or at least equal - to
specifying a scope selector/element, then it would seem that jQuery
should simply use the find() flow internally when a scope selector is
specfied. In other words, when a scope selector/element is specified,
find this element first and then 'call' the same method used for find
() - ie:
*** internally ***
$(p, $(#foo)) == $(#foo).find(p)
I can't think of any excepts to this - the result should always be
identical? If so, and performance is equal or superior, then *why not*
do this internally so the two statements above essentially become 100%
identical? It would just be two ways of expressing the same thing,
which is how it appears to users.
Am I off-base here? If so, which assumuption above breaks down?
Even if there is a good reason to treat the syntax differently
internally, I'm still interested to know if I should avoid using scope
selectors in favor of find() ***under all conditions*** - or only
under specific conditions?
/Kevin
On Feb 24, 5:58 pm, John Resig jere...@gmail.com wrote:
I want to point out a couple things:
1) You should always use $(#foo).find(p) in favor of $(p, $
(#foo)) - the second one ends up executing $(...) 3 times total -
only to arrive at the same result as doing $(#foo).find(p).
2) I generally dislike saying that there's one good way to do a
selector (especially with one that has such bad syntax, as above) -
especially since it may not always be that way.
In fact, I've already filed a bug and I'll be looking in to this
issue, possibly resolving it tonight or tomorrow - at which point the
advice will be false again.http://dev.jquery.com/ticket/4236
My recommendation is to always write the simplest, easiest to
understand, expression: jQuery will try to do the rest to optimize it.
--John
On Feb 24, 10:23 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same
speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling
$('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Up to 1.2.6 that was how it worked.
Kevin: keep using normal CSS selectors. An optimization for this case
(id descendants) has been added to jQuery core yesterday. Most of the
other selectors work faster the normal way $('.myclass something'),
and with this fix $('#id something') will also be as fast as it can.
cheers,
- ricardo
On Feb 25, 3:56 pm, Josh Nathanson joshnathan...@gmail.com wrote:
First, I *assume* these two statements are identical in performance:
$(p, $(#foo)) == $(p, #foo)
No -- the first one calls jQuery three times, the second one twice. Big
difference.
Now, I'm not sure about if it's faster to use find() than the context
selector. I would think under the hood it's doing the same thing, and the
context argument is just a handy shortcut.
-- Josh
-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Kevin Dalman
Sent: Wednesday, February 25, 2009 10:41 AM
To: jQuery (English)
Subject: [jQuery] Re: $('#foo p') or $('p', $('#foo'))
John wrote: You should always use $(#foo).find(p) in favor of $
(p, $(#foo))
I'm trying to extrapolate some general concepts from this 'rule'...
If so, then does it matter what the scope selector is? What if the
scope is *not an ID*, and therefore not as fast to find, like::
$(div.myClass).find(p) in favor of $(p, div.myClass) ???
If this is still true, then my understanding is that $(a).find(b)
syntax is ALWAYS faster than $(a, b)???
IF it is true that find() is always faster - or at least equal - to
specifying a scope selector/element, then it would seem that jQuery
should simply use the find() flow internally when a scope selector is
specfied. In other words, when a scope selector/element is specified,
find this element first and then 'call' the same method used for find
() - ie:
*** internally ***
$(p, $(#foo)) == $(#foo).find(p)
I can't think of any excepts to this - the result should always be
identical? If so, and performance is equal or superior, then *why not*
do this internally so the two statements above essentially become 100%
identical? It would just be two ways of expressing the same thing,
which is how it appears to users.
Am I off-base here? If so, which assumuption above breaks down?
Even if there is a good reason to treat the syntax differently
internally, I'm still interested to know if I should avoid using scope
selectors in favor of find() ***under all conditions*** - or only
under specific conditions?
/Kevin
On Feb 24, 5:58 pm, John Resig jere...@gmail.com wrote:
I want to point out a couple things:
1) You should always use $(#foo).find(p) in favor of $(p, $
(#foo)) - the second one ends up executing $(...) 3 times total -
only to arrive at the same result as doing $(#foo).find(p).
2) I generally dislike saying that there's one good way to do a
selector (especially with one that has such bad syntax, as above) -
especially since it may not always be that way.
In fact, I've already filed a bug and I'll be looking in to this
issue, possibly resolving it tonight or tomorrow - at which point the
advice will be false again.http://dev.jquery.com/ticket/4236
My recommendation is to always write the simplest, easiest to
understand, expression: jQuery will try to do the rest to optimize it.
--John
On Feb 24, 10:23 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same
speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling
$('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
FYI, I built a quick test page for this. As previously noted, the
differences in v1.2.6 are relatively small - about 2x as long for one
syntax over the other. But with 1.3.2 - Wow! - 60x longer!
jQuery version used = 1.3.2
Total number of DIVs = 100
Paragraphs per DIV = 50
---
$(#div50 p) = 574ms
$(p, #div50) = 8ms
$(#div50).find(p) = 9ms
For anyone interested, below is *the complete test-page* so you can do
your own testing - just copy and paste. No external files are
required. Since the HTML is all generated by script, you can easily
modify the number of divs and number of paragraphs per div just by
changing the vars. You can also add as many test-cases for comparison
as you want. It's all pretty self-explanitory.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/
TR/html4/strict.dtd
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEjQuery Speed Test/TITLE
STYLE type=text/css
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFF;
background: #000;
margin: 15px;
}
div {
border: 1px solid #FF0;
padding:5px 20px;
margin: 1ex 0;
}
p {
margin: 0;
}
div#Output {
font-size: 1.25em;
color: #000;
background: #FFF;
border: 3px solid #999;
margin-bottom: 15px;
}
div#Output p {
margin: 1ex 0;
}
/STYLE
SCRIPT type=text/javascript src=http://code.jquery.com/jquery-
latest.js/SCRIPT
SCRIPT type=text/javascript
$(document).ready(function(){
var
c_divs = 100
, c_paras = 50
, myDiv = Math.floor(c_divs/2)
, $Output = $(#Output)
, $DIV
, $Test
, start, end
, a_Selectors = []
, a_Times = []
;
$DIV = $(div/);
for (var i=1; i = c_paras; i++)
$DIV.append(p/).append( i );
for (var i=1; i = c_divs; i++)
$DIV.clone(false).appendTo(document.body).attr(id,div+i);
// Test # 1
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $(p, #div+ myDiv);
end = new Date();
a_Selectors.push('$(p, #div'+ myDiv +')');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $(#div+ myDiv).find(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').find(p)');
a_Times.push(end - start);
// Write the Results
$Output.html(
pjQuery version used nbsp; = + $DIV.jquery +/p
+
pTotal number of DIVs = + c_divs +/p +
pParagraphs per DIV nbsp; = + c_paras +/p +
hr /
);
var c = a_Selectors.length;
for (var i=0; i c; i++)
$Output.append(p+ a_Selectors[i] + = + a_Times[i]
+ms /
p);
});
/SCRIPT
/HEAD
BODY
DIV id=OutputWorking.../DIV
/BODY
/HTML
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
To follow-up from my post yesterday, here are the new numbers, for
1.3.3 (work in progress, naturally):
http://ejohn.org/files/jquery1.3.3/id.html
jQuery version used = 1.3.3pre
Total number of DIVs = 100
Paragraphs per DIV = 50
---
$(#div50 p) = 2ms
$(p, #div50) = 0ms
$(#div50).find(p) = 1ms
--John
On Wed, Feb 25, 2009 at 4:12 PM, Kevin Dalman kevin.dal...@gmail.com wrote:
FYI, I built a quick test page for this. As previously noted, the
differences in v1.2.6 are relatively small - about 2x as long for one
syntax over the other. But with 1.3.2 - Wow! - 60x longer!
jQuery version used = 1.3.2
Total number of DIVs = 100
Paragraphs per DIV = 50
---
$(#div50 p) = 574ms
$(p, #div50) = 8ms
$(#div50).find(p) = 9ms
For anyone interested, below is *the complete test-page* so you can do
your own testing - just copy and paste. No external files are
required. Since the HTML is all generated by script, you can easily
modify the number of divs and number of paragraphs per div just by
changing the vars. You can also add as many test-cases for comparison
as you want. It's all pretty self-explanitory.
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/
TR/html4/strict.dtd
HTML
HEAD
META http-equiv=Content-Type content=text/html; charset=utf-8
TITLEjQuery Speed Test/TITLE
STYLE type=text/css
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
color: #FFF;
background: #000;
margin: 15px;
}
div {
border: 1px solid #FF0;
padding: 5px 20px;
margin: 1ex 0;
}
p {
margin: 0;
}
div#Output {
font-size: 1.25em;
color: #000;
background: #FFF;
border: 3px solid #999;
margin-bottom: 15px;
}
div#Output p {
margin: 1ex 0;
}
/STYLE
SCRIPT type=text/javascript src=http://code.jquery.com/jquery-
latest.js/SCRIPT
SCRIPT type=text/javascript
$(document).ready(function(){
var
c_divs = 100
, c_paras = 50
, myDiv = Math.floor(c_divs/2)
, $Output = $(#Output)
, $DIV
, $Test
, start, end
, a_Selectors = []
, a_Times = []
;
$DIV = $(div/);
for (var i=1; i = c_paras; i++)
$DIV.append(p/).append( i );
for (var i=1; i = c_divs; i++)
$DIV.clone(false).appendTo(document.body).attr(id,div+i);
// Test # 1
start = new Date();
$Test = $(#div+ myDiv + p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +' p)');
a_Times.push(end - start);
// Test # 2
start = new Date();
$Test = $(p, #div+ myDiv);
end = new Date();
a_Selectors.push('$(p, #div'+ myDiv +')');
a_Times.push(end - start);
// Test # 3
start = new Date();
$Test = $(#div+ myDiv).find(p);
end = new Date();
a_Selectors.push('$(#div'+ myDiv +').find(p)');
a_Times.push(end - start);
// Write the Results
$Output.html(
pjQuery version used nbsp; = + $DIV.jquery
+/p +
pTotal number of DIVs = + c_divs +/p +
pParagraphs per DIV nbsp; = + c_paras +/p +
hr /
);
var c = a_Selectors.length;
for (var i=0; i c; i++)
$Output.append(p+ a_Selectors[i] + = +
a_Times[i] +ms /
p);
});
/SCRIPT
/HEAD
BODY
DIV id=OutputWorking.../DIV
/BODY
/HTML
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
That's a fantastic improvement. But now I have a new challenge - keep reading... To see if there really is a difference between the 2nd and 3rd options, or whether it is just 'variance', I cranked up the DIVs Ps and tried both versions again: ALL tests below are in FireFox 3.0.6 jQuery version used = 1.3.2 Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 15916ms $(p, #div500) = 32ms $(#div500).find(p) = 2ms jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 48ms $(p, #div500) = 4ms $(#div500).find(p) = 4ms The last two tests seem identical, but the first syntax is still 0- times slower in 1.3.3. I though the 1st syntax might be slower because it handles *a range of possible syntaxes*, like $(#div500 p). So I add 2 new syntaxes and ran the test again... jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 34ms $(p, #div500) = 2ms $(#div500).find(p) = 3ms $(#div500 p) = 16396ms $(#div500).children(p) = 32ms WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... jQuery version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 --- $(#div500 p) = 55 ms $(p, #div500) = 2 ms $(#div500).find(p) = 3 ms $(#div500 p) = 14802 ms $(#div500).children(p) = 32 ms $( $(#div500)[0].childNodes ).filter(p) = 19 ms The last (childNodes) test gathers the same elements in half the time. The 32ms performance of children(p) is very good, but perhaps there is still room for improvement? /Kevin On Feb 25, 1:30 pm, John Resig jere...@gmail.com wrote: To follow-up from my post yesterday, here are the new numbers, for 1.3.3 (work in progress, naturally):http://ejohn.org/files/jquery1.3.3/id.html jQuery version used = 1.3.3pre Total number of DIVs = 100 Paragraphs per DIV = 50 --- $(#div50 p) = 2ms $(p, #div50) = 0ms $(#div50).find(p) = 1ms --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... Oh right, this is a regression to what I just did - I can tweak that. I'll look in to it tonight. --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
@John: I found a little bug in your v1.3.3 test version... This selector works fine in FireFox, but bombs out in IE7... $(#div50 p) IE7 -- Object doesn't support this property or method But this works fine: $(#div50 p) NOTE that I'm pulling v1.3.3 directly from your personal copy (jquery1.3.3/dist/jquery.js). I realize this is just a test version, but thought you'd like to know. /Kevin On Feb 25, 4:21 pm, John Resig jere...@gmail.com wrote: WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... Oh right, this is a regression to what I just did - I can tweak that. I'll look in to it tonight. --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Ok, fixed the perf regression. Here's the commit: http://dev.jquery.com/changeset/6261 In Firefox 3.0.6 I'm now getting (on my local copy): Query version used = 1.3.3pre Total number of DIVs = 1000 Paragraphs per DIV = 500 $(#div500 p) = 19ms $(p, #div500) = 2ms $(#div500).find(p) = 1ms $(#div500 p) = 6ms $(#div500).children(p); = 19ms I'll dig around tomorrow and see if I can still get some juice out of #div500 p. The issue is that $(#div500) takes a *ton* of shortcuts to try and make ID selectors faster - which is good since that's what developers tend to use a lot - but in the case of $(#div500 p) we have to dip down into the selector engine which has to be more thorough in its checks. I've cut out just about everything that I can to make #id-rooted queries faster, but I'll keep checking to see if there's something that I'm overlooking. As far as .children() goes, I have that on the list to optimize (along with next/prev/siblings/parent/parents/etc.). And I'll tackle the IE regression tomorrow morning, as well. Thanks for these tests - it's stuff that I've been meaning to get around to for a while now but it's good to have some easy-to-spot targets. --John On Wed, Feb 25, 2009 at 7:21 PM, John Resig jere...@gmail.com wrote: WOW! Check out the last 2 tests, John. Syntax #4 takes 512-times longer than #5! I think this code needs a little TLC too ;) It was also interesting that $(#div500).children(p) is 10-times slower than $(#div500).find(p). So I added one final test using childNodes and filter() to see if I could beat .children()... Oh right, this is a regression to what I just did - I can tweak that. I'll look in to it tonight. --John
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
On Feb 26, 11:22 am, John Resig jere...@gmail.com wrote:
Ok, fixed the perf regression. Here's the
commit:http://dev.jquery.com/changeset/6261
In Firefox 3.0.6 I'm now getting (on my local copy):
Query version used = 1.3.3pre
Total number of DIVs = 1000
Paragraphs per DIV = 500
$(#div500 p) = 19ms
$(p, #div500) = 2ms
$(#div500).find(p) = 1ms
$(#div500 p) = 6ms
$(#div500).children(p); = 19ms
The benchmark is getElementById().getElementsByTagName() - why not
inlcude that in the test? Add the following below test 3:
// Test # 4
start = new Date();
$Test = document.getElementById('div' +
myDiv).getElementsByTagName('p');
end = new Date();
a_Selectors.push('getEBI().getEBTName()');
a_Times.push(end - start);
--
Rob
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to 3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
ok, but what in jquery knows that $(p, $(#foo)) should look for the
p tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Thanks Stephen! I gave your reply a 5 star rating because you deserve
it.
On Feb 24, 1:28 pm, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to 3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
lol, but I'm interested in what jquery does with what I tell it.
jQuery Lover wrote:
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.js
Or you can read jquery documentaion. I also suggest Learning jQuery
by Karl Swedberg and Jonathan Chaffer.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 7:00 PM, Liam Potter radioactiv...@gmail.com wrote:
lol, but I'm interested in what jquery does with what I tell it.
jQuery Lover wrote:
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com
wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM
tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster
than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in
a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was
between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF
and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right
to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to
the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100
are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Lima,
taking a look at $(p, $(#foo)) you see that the second parameter
is a function: $(#foo).
This function is evaluated first and returns the jQuery object for #foo.
Then the surrounding $(p,...) function is called with the jQuery
object for #foo as second parameter.
The documentation of jQuery says, if $() is called with two
parameters, where the first one is a selector expression, than the
second parameter is the optional context the selector should be
executed in.
see http://docs.jquery.com/Core/jQuery#expressioncontext
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
lol, but I'm interested in what jquery does with what I tell it.
jQuery Lover wrote:
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com
wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM
tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster
than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in
a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was
between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF
and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right
to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to
the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100
are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Stephan,
Thanks for doing this testing! Would you mind profiling $
('#foo').find('p') as well? I suspect it will be roughly equivalent to
$('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF
and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up to 3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)
http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling $('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Liam,
I think you're thinking of $(p, #foo).
Notice it's the difference between two params being passed in to the
selector function (the original question) vs a single param that
happens to be a comma separated list of selectors.
On Feb 24, 6:00 am, Liam Potter radioactiv...@gmail.com wrote:
lol, but I'm interested in what jquery does with what I tell it.
jQuery Lover wrote:
That is how it works Liam !!! jQuery does not knows, it's told so...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:49 PM, Liam Potter radioactiv...@gmail.com
wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the p
tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the
same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor
up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the
top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on
large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
I want to point out a couple things:
1) You should always use $(#foo).find(p) in favor of $(p, $
(#foo)) - the second one ends up executing $(...) 3 times total -
only to arrive at the same result as doing $(#foo).find(p).
2) I generally dislike saying that there's one good way to do a
selector (especially with one that has such bad syntax, as above) -
especially since it may not always be that way.
In fact, I've already filed a bug and I'll be looking in to this
issue, possibly resolving it tonight or tomorrow - at which point the
advice will be false again.
http://dev.jquery.com/ticket/4236
My recommendation is to always write the simplest, easiest to
understand, expression: jQuery will try to do the rest to optimize it.
--John
On Feb 24, 10:23 am, Stephan Veigl stephan.ve...@gmail.com wrote:
Hi Karl,
$('#foo').find('p') and $('p', $('#foo')) are approximately of the same speed.
I've put the test code on JSBin, so everybody can play around with it
and try other combinations :-)http://jsbin.com/ifemo
by(e)
Stephan
2009/2/24 Karl Swedberg k...@englishrules.com:
Hi Stephan,
Thanks for doing this testing! Would you mind profiling $('#foo').find('p')
as well? I suspect it will be roughly equivalent to $('p', $('#foo'))
Cheers,
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 24, 2009, at 8:28 AM, Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
Liam,
$() can take one or two arguments. The first argument is what your
searching for. The second argument is the context in which you are
searching. If you only use one argument, the second defaults to the
whole dom.
$(#foo p) searches for all p in #foo. It does this by getting every
p element in the document and then selecting the ones inside #foo.
The other option uses a second argument to limit the scope. $(#foo)
returns #foo. $(p, $(#foo)) uses #foo as its context instead of
the whole dom.
Just to clarify, $(p, #foo) would be meaningless, because #foo
isn't its own context. It needs to be an object returned by jquery. $
(p, #foo) would give you both all p's and all #foo's, which is not
what you want in this circumstance.
On Feb 24, 8:49 am, Liam Potter radioactiv...@gmail.com wrote:
ok, but what in jquery knows that $(p, $(#foo)) should look for the
p tags inside of #foo, why does it treat it like $(#foo p)?
jQuery Lover wrote:
Liam, you can use $(p, #foo). The second parameter must be a
jQuery object or dom element...
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Tue, Feb 24, 2009 at 6:44 PM, Liam Potter radioactiv...@gmail.com
wrote:
Hi Stehpan :p
I understand that, I'm just not sure why $(p, $(#foo)) is not the same
as $(p, #foo)
- Liam
Stephan Veigl wrote:
Hi Lima,
1) #foo is an ID and since IDs should be unique there has to bee only
one #foo element
2) $(p, $(#foo)) selects all p elements in the scope of the #foo
element.
In other words, it selects every p element under #foo in the DOM tree.
by(e)
Stephan
2009/2/24 Liam Potter radioactiv...@gmail.com:
I've been following this discussion, but I need explaining why $(p,
$(#foo)) doesn't select all p tags and all #foo id's ?
Stephan Veigl wrote:
Hi,
I've done some profiling on this, and $(p, $(#foo)) is faster than
$(#foo p) in both jQuery 1.2.6 and 1.3.2.
the test HTML consists of 100 ps in a foo div and 900 ps in a
bar div.
However the factor differs dramatically:
In 1.2.6 the speedup from $(p, $(#foo)) to $(#foo p) was between
1.5x (FF) and 2x (IE),
while for 1.3.2 the speedup is 20x (FF) and 15x (IE).
$(p, $(#foo)) is faster in 1.3.2, by a factor of 1.5 (both FF and
IE),
while $(#foo p) is _slower_ in 1.3.2 by 8.5x (FF) and 4.6x (IE).
Even with an empty bar div $(p, $(#foo)) is faster by a factor up
to
3x.
Conclusion:
If you have an ID selector, first get the element by it's ID and use
it as scope for further selects.
by(e)
Stephan
2009/2/23 ricardobeat ricardob...@gmail.com:
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
On Feb 24, 6:10 pm, Jon Sagotsky sagot...@gmail.com wrote:
Just to clarify, $(p, #foo) would be meaningless
That's not true. $('p', '#foo') has the exact same result as $('p', $
('#foo')), the context is executed just as well.
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
On Mon, Feb 23, 2009 at 11:08 AM, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
I'm certain you meant $('p', $('#foo')) immediately above (and I'm
wondering the same thing, so thanks for asking)
[jQuery] Re: $('#foo p') or $('p', $('#foo'))
up to jQuery 1.2.6 that's how the selector engine worked (from the top
down/left to right). The approach used in Sizzle (bottom up/right to
left) has both benefits and downsides - it can be much faster on large
DOMs and some situations, but slower on short queries. I'm sure
someone can explain that in better detail.
Anyway, in modern browsers most of the work is being delegated to the
native querySelectorAll function, as so selector performance will
become more of a browser makers' concern.
- ricardo
On Feb 23, 1:08 pm, Peter Bengtsson pete...@gmail.com wrote:
I watched the John Resig presentation too and learned that CSS
selectors always work from right to left.
That would mean that doing this::
$('#foo p')
Would extract all p tags and from that list subselect those who
belong to #foo. Suppose you have 1000 p tags of them only 100 are
inside #foo you'll have wasted 900 loops.
Surely $('#foo') is the fastest lookup possible. Doing it this way
will effectively limit the scope of the $('p') search and you will
never be bothered about any p tags outside #foo.
Or am I talking rubbish?
