Re: [jQuery] Performance question
Hi,
It's as if when the id selector is passed then the $ method just uses a
document.getElementById.
Well IDs are supposed to be unique throughout the entire document (i.e.
there can be one and only one element in the entire document with an ID of
myId), so why shouldn't it simply use document.getElementById?
Well, you might whant to work with an element only if it is inside another
one, which you already have:
div id=IamAllreadyKnowndiv id=42asdf/div/div
$('#42',known) - should find one Element
div id=IamAllreadyKnown/divdiv id=42asdf/div
$('#42',known) - should find no Elements
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Christof Donat schrieb: It's as if when the id selector is passed then the $ method just uses a document.getElementById. Well IDs are supposed to be unique throughout the entire document (i.e. there can be one and only one element in the entire document with an ID of myId), so why shouldn't it simply use document.getElementById? Well, you might whant to work with an element only if it is inside another one, which you already have: Unfortnuately, getElementById exists only for the document object, therefore you can't just say context.getElementById(...). I think this is the reason why jQuery can't help you there. -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Performance question
Hi,
Well, you might whant to work with an element only if it is inside
another one, which you already have:
Unfortnuately, getElementById exists only for the document object,
therefore you can't just say context.getElementById(...). I think this
is the reason why jQuery can't help you there.
I know.
JQuery could check if context.getElementById exists and if it doesn't walk the
elements in the context and return the first Element it finds that has the
given ID:
if( context.getElementsById ) elems = [context.getElementsById(id)];
else {
var f = function(i,c) {
if( c.id == i ) return [c];
for( ch in c.childNodes ) {
if( ch.nodeType != 1 ) continue;
var r = f(i.ch);
if( r.length 0 ) return r;
}
return [];
}
elems = f(id,context);
}
That means that for browsers with a good implementation of getElementById()
$('#myid',context) is much slower than $('#myid'), but it returns the
expected result. At least that should not be slower than
$('.myclass',context).
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
IDs are supposed to be unique per the spec. jQuery shouldn't have to
hack/deal with invalid markup.
--
Brandon Aaron
On 10/10/06, Christof Donat [EMAIL PROTECTED] wrote:
Hi,
Well, you might whant to work with an element only if it is inside
another one, which you already have:
Unfortnuately, getElementById exists only for the document object,
therefore you can't just say context.getElementById(...). I think this
is the reason why jQuery can't help you there.
I know.
JQuery could check if context.getElementById exists and if it doesn't walk the
elements in the context and return the first Element it finds that has the
given ID:
if( context.getElementsById ) elems = [context.getElementsById(id)];
else {
var f = function(i,c) {
if( c.id == i ) return [c];
for( ch in c.childNodes ) {
if( ch.nodeType != 1 ) continue;
var r = f(i.ch);
if( r.length 0 ) return r;
}
return [];
}
elems = f(id,context);
}
That means that for browsers with a good implementation of getElementById()
$('#myid',context) is much slower than $('#myid'), but it returns the
expected result. At least that should not be slower than
$('.myclass',context).
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Hi,
IDs are supposed to be unique per the spec. jQuery shouldn't have to
hack/deal with invalid markup.
jQuery has a context-parameter:
div id=IamAllreadyKnowndiv id=42asdf/div/div
$('#42',known) - should find one element
div id=IamAllreadyKnown/divdiv id=42asdf/div
$('#42',known) - should find no elements but currently does find one
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Brandon Aaron schrieb: IDs are supposed to be unique per the spec. jQuery shouldn't have to hack/deal with invalid markup. The idea does not rely on invalid markup, but rather on a dynamic structure involving IDs: By searching for IDs within a context, you can apply stuff to them only when they are e.g. a child of a certain element. But as it is quite easy to solve this without IDs, we shouldn't bother with a flawed workaround. -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Performance question
Hi,
But as it is quite easy to solve this without IDs, we shouldn't bother
with a flawed workaround.
I have not yet been in a situation where I would have needed that, but it is a
question of least surprise. In case I would use a construct like
$('#myid',context), I would be very surprised to get an Element that is not
in my current context.
As I have shown, a solution does not need much code and doesn't make anything
else noticably slower. I guess that with the existing infrastructure in
jQuery the code would even be shorter.
Christof
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Christof Donat schrieb: As I have shown, a solution does not need much code and doesn't make anything else noticably slower. I guess that with the existing infrastructure in jQuery the code would even be shorter. Right, I got that wrong. Your modifications concern only the special case, therefore it should be no problem to add it. I filed a bug report, please add anything that might be useful: http://jquery.com/dev/bugs/bug/267/ -- Jörn ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Performance question
Thanks for all your responses. I actually do all the things that you mentioned: reusing the jQ object, chaining, setting a context, etc. Actually it would be helpful to have some performance analysis on the different kinds of queries, such as searching by ID, by element, class name, attribute, xpath queries, context-delimited, etc., because even though it's somewhat straightforward to know that a search by ID is faster than searching by class name, it'd be interesting (and useful)to know by how much.
On 10/7/06, Matt Stith [EMAIL PROTECTED] wrote:
yes, that would help quite a bit, since jquery would only need to look once.On 10/7/06, Jacky
[EMAIL PROTECTED] wrote: Would caching the jQuery object a help too? Sometimes you just can't keep the chain. e.g. var jqObj = $(#abc);
On 10/8/06, Karl Swedberg [EMAIL PROTECTED] wrote: On Oct 7, 2006, at 3:39 PM, George Adamson wrote:An easy performance booster is to use the second param in $() to set a
context for the search. Eg: $(DIV.myClass, myParentElement). Perhaps this is what you meant when you mentioned 'getting a parent element' ?
Chaining methods is helpful so you can avoid re-querying. If you need to put other code in betwen method calls then reusing the same JQuery object by
putting it into a variable beforehand is worth while to save requerying. If you're going to do several queries inside the same parent element (s) then
a combination of the above will be a big help. Those sound like good suggestions to me, though I'm no expert. Something I try to keep in mind is the relative speed of different
types of queries. This has been mentioned on the list before, but in case you didn't see it, references to IDs are fastest, followed by elements, and then classes. At least, that's how I've understood
previous discussions of the topic. So: a.$('#my-id') is faster than $('div#my-id'), and b. $('div.my-class') is faster than $('.my-class') Hop that helps.
Karl ___ Karl Swedberg www.englishrules.com
www.learningjquery.com___ jQuery mailing list discuss@jquery.com
http://jquery.com/discuss/ -- Best Regards, Jacky 網絡暴民 http://jacky.seezone.net
___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
___jQuery mailing listdiscuss@jquery.comhttp://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
I have a somewhat related observation. I have discovered that when selecting by ID, the context parameter does not matter. In other words, these two statements are functionally equivalent:$(#myId);
and$(#myId, myContext);It's as if when the id selector is passed then the $ method just uses a document.getElementById. Besides the fact that this may produce unexpected results, it also means that you should be careful when using IDs to try to gain performance. Because if the size of your markup is large then this
$(#myId, myContext);may actually be slower then this$(.myClass, myContext);I have definitely seen performance gains by using the second one over the first.Brendan
On 10/9/06, Raziel Alvarez [EMAIL PROTECTED] wrote:
Thanks for all your responses. I actually do all the things that you mentioned: reusing the jQ object, chaining, setting a context, etc. Actually it would be helpful to have some performance
analysis on the different kinds of queries, such as searching by ID, by element, class name, attribute, xpath queries, context-delimited, etc., because even though it's somewhat straightforward to know that a search by ID is faster than searching by class name, it'd be interesting (and useful)to know by how much.
On 10/7/06, Matt Stith [EMAIL PROTECTED]
wrote:
yes, that would help quite a bit, since jquery would only need to look once.On 10/7/06, Jacky
[EMAIL PROTECTED] wrote: Would caching the jQuery object a help too? Sometimes you just can't
keep the chain. e.g. var jqObj = $(#abc);
On 10/8/06, Karl Swedberg [EMAIL PROTECTED] wrote: On Oct 7, 2006, at 3:39 PM, George Adamson wrote:
An easy performance booster is to use the second param in $() to set a
context for the search. Eg: $(DIV.myClass, myParentElement). Perhaps this is what you meant when you mentioned 'getting a parent element' ?
Chaining methods is helpful so you can avoid re-querying. If you need to put other code in betwen method calls then reusing the same JQuery object by
putting it into a variable beforehand is worth while to save requerying. If you're going to do several queries inside the same parent element (s) then
a combination of the above will be a big help. Those sound like good suggestions to me, though I'm no expert. Something I try to keep in mind is the relative speed of different
types of queries. This has been mentioned on the list before, but in case you didn't see it, references to IDs are fastest, followed by elements, and then classes. At least, that's how I've understood
previous discussions of the topic. So: a.$('#my-id') is faster than $('div#my-id'), and b. $('div.my-class') is faster than $('.my-class') Hop that helps.
Karl ___ Karl Swedberg www.englishrules.com
www.learningjquery.com___ jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/ -- Best Regards, Jacky
網絡暴民 http://jacky.seezone.net
___ jQuery mailing list discuss@jquery.com
http://jquery.com/discuss/
___jQuery mailing listdiscuss@jquery.com
http://jquery.com/discuss/
___jQuery mailing listdiscuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
On 10/9/06, Brendan O'Brien [EMAIL PROTECTED] wrote: It's as if when the id selector is passed then the $ method just uses a document.getElementById.Well IDs are supposed to be unique throughout the entire document (i.e. there can be one and only one element in the entire document with an ID of myId), so why shouldn't it simply use document.getElementById? ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Performance question
From: Brendan O'Brien
I have a somewhat related observation. I have discovered
that when selecting by ID, the context parameter does not
matter. In other words, these two statements are
functionally equivalent:
$(#myId);
and
$(#myId, myContext);
It's as if when the id selector is passed then the $ method
just uses a document.getElementById.
Indeed it does just that. See this code in jquery.js:
var re2 = /^([#.]?)([a-z0-9\\*_-]*)/i;
var m = re2.exec(t);
if ( m[1] == # ) {
// Ummm, should make this work in all XML docs
var oid = document.getElementById(m[2]);
r = ret = oid ? [oid] : [];
t = t.replace( re2, );
} else {
if ( !m[2] || m[1] == . ) m[2] = *;
for ( var i = 0; i ret.length; i++ )
r = jQuery.merge( r,
m[2] == * ?
jQuery.getAll(ret[i]) :
ret[i].getElementsByTagName(m[2])
);
}
Besides the fact that this may produce unexpected results...
Well, IDs are supposed to be unique in a document, so $(myId,myContext)
doesn't seem all that useful even if the code did make use of it. It would
reject the case where #myId exists but is outside of myContext, and work the
same as the current code in the the other two cases (myId doesn't exist, or
myId does exist inside myContext).
Is that what you were trying to do - operate on element #myId but only if
that element is inside myContext, ignoring it if that element is outside
myContext? If that's not the requirement, then you can just leave out
myContext.
it also means that you should be careful when using IDs
to try to gain performance. Because if the size of your
markup is large then this
$(#myId, myContext);
may actually be slower then this
$(.myClass, myContext);
I have definitely seen performance gains by using the second
one over the first.
That's an interesting result. I would have guessed (hoped?) that #myId
should be fast even in a large document - don't most browsers load all the
IDs into a hash table? I wonder how the comparison turns out in different
browsers.
You might try the comparison with $(myId) instead of $(#myId,myContext),
but I'll bet it wouldn't make any difference since the code doesn't use the
context. (This should certainly be documented if it isn't already.)
-Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Saw you had no responses so here's a couple of suggestions... An easy performance booster is to use the second param in $() to set a context for the search. Eg: $(DIV.myClass, myParentElement). Perhaps this is what you meant when you mentioned 'getting a parent element' ? Chaining methods is helpful so you can avoid re-querying. If you need to put other code in betwen method calls then reusing the same JQuery object by putting it into a variable beforehand is worth while to save requerying. If you're going to do several queries inside the same parent element(s) then a combination of the above will be a big help. Not sure what experience you have. You may have already tried these approaches. Worth a try if not. Someone more involved in the development may be able to offer some more in depth performance tips. Cheers George Raziel Alvarez wrote: Hi. I'm building a highly dynamic application based using jQuery extensively. I have a set of templates with predefined markup, which is retrieved and modified using jQuery CSS queries. However, as the markup size increases the queries are becoming considerably slow. I've tested some different ways of rewriting my queries (retrieving the elements by id, searching by name or any other attribute under a specific context, getting a parent element and traversing the DOM using operations like children(), etc.) but I haven't discovered a best practice so I can improve the performance consistently. I also tried to use XPath queries, but they actually didn't work (even the simplest ones) and I think they're built as CSS queries anyway. Can anybody point me in the right direction to write performant code with jQuery? I know it depends on my markup and other factors, but I wonder if there's a set of best practices in order to get the most of the library. Thanks, ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/ -- View this message in context: http://www.nabble.com/Performance-question-tf2398816.html#a6697355 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Performance question
On Oct 7, 2006, at 3:39 PM, George Adamson wrote:
An easy performance booster is to use the second param in $() to set a
context for the search. Eg: $(DIV.myClass, myParentElement).
Perhaps this
is what you meant when you mentioned 'getting a parent element' ?
Chaining methods is helpful so you can avoid re-querying. If you
need to put
other code in betwen method calls then reusing the same JQuery
object by
putting it into a variable beforehand is worth while to save
requerying.
If you're going to do several queries inside the same parent element
(s) then
a combination of the above will be a big help.
Those sound like good suggestions to me, though I'm no expert.
Something I try to keep in mind is the relative speed of different
types of queries. This has been mentioned on the list before, but in
case you didn't see it, references to IDs are fastest, followed by
elements, and then classes. At least, that's how I've understood
previous discussions of the topic. So:
a. $('#my-id') is faster than $('div#my-id'), and
b. $('div.my-class') is faster than $('.my-class')
Hop that helps.
Karl
___
Karl Swedberg
www.englishrules.com
www.learningjquery.com
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
Would caching the jQuery object a help too? Sometimes you just can't
keep the chain.
e.g. var jqObj = $(#abc);
On 10/8/06, Karl Swedberg [EMAIL PROTECTED] wrote:
On Oct 7, 2006, at 3:39 PM, George Adamson wrote:
An easy performance booster is to use the second param in $() to set a
context for the search. Eg: $(DIV.myClass, myParentElement).
Perhaps this
is what you meant when you mentioned 'getting a parent element' ?
Chaining methods is helpful so you can avoid re-querying. If you
need to put
other code in betwen method calls then reusing the same JQuery
object by
putting it into a variable beforehand is worth while to save
requerying.
If you're going to do several queries inside the same parent element
(s) then
a combination of the above will be a big help.
Those sound like good suggestions to me, though I'm no expert.
Something I try to keep in mind is the relative speed of different
types of queries. This has been mentioned on the list before, but in
case you didn't see it, references to IDs are fastest, followed by
elements, and then classes. At least, that's how I've understood
previous discussions of the topic. So:
a. $('#my-id') is faster than $('div#my-id'), and
b. $('div.my-class') is faster than $('.my-class')
Hop that helps.
Karl
___
Karl Swedberg
www.englishrules.com
www.learningjquery.com
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Best Regards,
Jacky
網絡暴民 http://jacky.seezone.net
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Performance question
yes, that would help quite a bit, since jquery would only need to look once.
On 10/7/06, Jacky [EMAIL PROTECTED] wrote:
Would caching the jQuery object a help too? Sometimes you just can't
keep the chain.
e.g. var jqObj = $(#abc);
On 10/8/06, Karl Swedberg [EMAIL PROTECTED] wrote:
On Oct 7, 2006, at 3:39 PM, George Adamson wrote:
An easy performance booster is to use the second param in $() to set a
context for the search. Eg: $(DIV.myClass, myParentElement).
Perhaps this
is what you meant when you mentioned 'getting a parent element' ?
Chaining methods is helpful so you can avoid re-querying. If you
need to put
other code in betwen method calls then reusing the same JQuery
object by
putting it into a variable beforehand is worth while to save
requerying.
If you're going to do several queries inside the same parent element
(s) then
a combination of the above will be a big help.
Those sound like good suggestions to me, though I'm no expert.
Something I try to keep in mind is the relative speed of different
types of queries. This has been mentioned on the list before, but in
case you didn't see it, references to IDs are fastest, followed by
elements, and then classes. At least, that's how I've understood
previous discussions of the topic. So:
a. $('#my-id') is faster than $('div#my-id'), and
b. $('div.my-class') is faster than $('.my-class')
Hop that helps.
Karl
___
Karl Swedberg
www.englishrules.com
www.learningjquery.com
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
Best Regards,
Jacky
網絡暴民 http://jacky.seezone.net
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
