Question

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.

1. Created a DIV with id=”context” and nested DIV with id=”holder” in “#context” created earlier.

2. Created a nested DIVs of depth 18 and append <div id="context"><div id="holder"></div></div> to it resulting in 20 nested DIVs

3. 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 😛

Answer 1

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