I was reading this article by Brandon Aaron here, about how jquery context may help. So i thought of doing a test of my own. So this is what I did.
Created a DIV with id="context" and nested DIV with id="holder" in "#context" created earlier.
Created a nested DIVs of depth 18 and append <div id="context"><div id="holder"></div></div>
to it resulting in 20 nested DIVs
Now I tested time taken to access "#holder" via the following selectors:
a. $("#holder") // no context
b. $("#holder", "#context") // with "#context" selector string
c. $("#holder", $("#context")) // sending jquery object each time with selector "#context"
d. $("#holder", $context) // where, var $context = $("#context"). Caching jquery obj
Each of the cases where accessed X = 1000
times and start and end time difference was noted. I found that time taken for:
case(a) was the least consistent 28-32msec [jquery-1.3.2]
case(b)+(c) had the highest times 60-65 msec & 70-75 msec respectively
case(d) had 40-50msec with 1 or 2 spiked values.
Is this type of basic check valid? You can play with the JS code here at JSBIN. [Do let me know If I can improve this test some how]
If YES, then how does this 'context' really help?
#NOTE: also replace the jquery-1.3.2 with jquery-1.4.2 in jsbin edit mode and you'll be surprised to see the numbers bump up :P
What is the slowest selector in jQuery ? Class selectors are the slowest selectors in jQuery. Which is the fastest selector in jQuery ? ID and Element selector are the fastest selectors in jQuery.
jQuery( selector [, context ] )Returns: jQuery. Description: Accepts a string containing a CSS selector which is then used to match a set of elements.
Context really helps when you have a much larger DOM that you are searching through. Searching for IDs is already very fast and context doesn't really help that much in that case. Where context can really make a difference is when you are selecting by tag name or class.
Try testing like this: http://jsbin.com/aciji4/4
you can really see the timing get better for context when you bump up number of items in the DOM like this: http://jsbin.com/aciji4/6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With