Brandon Aaron

It sounds to me that the real problem is that the second argument is misnamed, or that $('a', '#myContainer').context returns the wrong thing.

By Ike on Wednesday, June 24, 2009 at 11:44 PM

Scope content issues aside, what are the differences in performance between $('a', '#myContainer') and $('#myContainer a') ?

By Bryan Buchs on Thursday, June 25, 2009 at 02:09 PM

This has always puzzled me from a performance standpoint. Which is really faster?

1) $('a', '#myContainer');

2) $('#myContainer').find('a');

3) $('myContainer a');

#3 is obviously the slowest because it searchs all anchor tags (right-most) in the context of the document, then as descendants of #myContainer.

#1 has one method call and is in the context of #myContainer.

#2 has two method calls, the first where #myContainer is in the context of the document, it returns the jQuery set of elements (in this case one element if only 1 ID on the page with ‘myContainer’) which is then used as a context for the find() method.

It would appear that #1 is faster than #2. Thoughts?

By Joe McCann on Thursday, June 25, 2009 at 02:54 PM

@Brian

It don’t traversing all DOM — just the #myContainer element. It’s faster.

By Mushex Antaranian on Thursday, June 25, 2009 at 02:59 PM

@joe, i think you missed an impt. point in the article mentioning that 1) and 2) are effectively the same query…

By sal on Thursday, June 25, 2009 at 04:02 PM

Is it correct to say that “the correct context” is an elment and not an array of elements?

By Michele Gargiulo on Thursday, June 25, 2009 at 04:02 PM

So how about the difference between this:

var context = $('#myContainer')[0];
$('a', context);

and this:

$('a', $('#myContainer'));

? The first example seems to assume the variable the context is taken from is a collection, but that isn’t always the case, is it?

By Jimmy on Friday, June 26, 2009 at 06:56 AM

Isn’t the context of…

var context = $('#myContainer')[0];

a document?

If so, it will have to search against the whole document at this point. I haven’t tested though.

By KiT on Friday, June 26, 2009 at 07:28 AM

@Brandon

Ah, so passing $(‘#myContainer’)[0] in as the context is because it’s expecting the actual DOM element and not a jQuery object?

By Jimmy on Saturday, June 27, 2009 at 01:15 AM

hi!

I have set up a demo page with a simple <div id="primary"> and some <a>-tags inside.

at the end, I run the following code:

$(function() {
    var start = 0,
        end = 500;

    console.log("$('#primary a')");
    console.time('aaa');
    for (start = 0; start < end; start++)
    {
        $('#primary a');
    }
    console.timeEnd('aaa');

    console.log("$('a', '#primary')");
    console.time('bbb');
    for (start = 0; start < end; start++)
    {
        $('a', '#primary');
    }
    console.timeEnd('bbb');

    console.log("$('#primary').find('a')");
    console.time('ccc');
    for (start = 0; start < end; start++)
    {
        $('#primary').find('a');
    }
    console.timeEnd('ccc');

    console.log("$('a', context)");
    console.time('ddd');
    var context = $('#primary')[0];
    for (start = 0; start < end; start++)
    {
        $('a', context);
    }
    console.timeEnd('ddd');
});

the fastest one is the first(!) one… shouldn’t it be the last one????

By toby on Saturday, June 27, 2009 at 02:14 PM

When a selector returns only 1 element, can jQuery not then change the context to that element? That would speed up most of these cases.

By Sean Catchpole on Thursday, July  2, 2009 at 04:32 PM

Just did some really interesting tests and discovered, as you mentioned, Brandon, that there are a lot of variables here - DOM size, structure, and, as it turns out, browser and type of selector.

In FF2 (which lacks a native getElementsByClassName), the fastest result on my page was not using context, and not even using find, but rather in using TWO finds!

The winner ended up being:

$('#myID').find('.myClass').find('a')

Over this:

$('#myID .myClass a')

Or this:

$('#myID').find('.myClass a')

Or this:

var context = $("#myID")[0];
$('.myClass a', context)

But that changed in FF3 (which has a native getElementsByClassName), where the winner was actually just the straight selector:

$('#myID .myClass a')

Pretty wild stuff. Thanks much for the head’s up! Without this article, I wouldn’t have even tested these things.

By Nathan Logan on Thursday, July  9, 2009 at 11:29 PM

@Brandon Is it 1:using the context “correctly” or is it 2:using the context correctly ? IF(2) THEN Why not just enforcing this in jQ 1.3.3 ? var context = $(‘#primary’)[0]; $(‘a’, context); // OK $(‘a’, “#primary”); // throw an exception

What is the point of allowing incorrect usage? Or is it “incorrect” ?

– DBJ

By DBJ on Thursday, August 20, 2009 at 12:45 PM

Hey Brandon,

I’ve posted a patch to make the context parameter behave more consistently: dev.jquery.com/ticket/5172 I’d like to have you opinion about it.

Regards,

Louis-Rémi

By lrbabe on Tuesday, September  8, 2009 at 05:31 PM

Brandon,

I appreciate this post. Somehow all this time using Firebug, I never noticed the profile() and profileEnd() methods.

I’ve been using Context incorrectly, as well – didn’t realize it expected a node rather than a jQuery collection.

However, I’d like to point something out. Your tests (with the profiling code, in your comment) were an unfair comparison. In test #2, you select the #primary element every time inside that loop, while in test #4 (where you show that using Context is slightly faster), you select the node outside of the loop.

I ran my own (near identical) tests, and at least in FF 3, using .find() is faster than specifying the context. I still prefer using context for its scope advantages, and chances are, the lookup on the parent element may have already have been done. But in an equal comparison, .find() is consistently faster (for me).

console.log('Select Header links using Find');
console.profile();
    var header = $('#header');
    for( var i = 0; i < 100; i++)
    {
        header.find('a');
    }
console.profileEnd();

console.log('Select Header links using Context');
console.profile();
    var headerNode = $('#header')[0];
    for( var i = 0; i < 100; i++)
    {
        $('a', headerNode);
    }
console.profileEnd();

By Richard Morgan on Monday, February 15, 2010 at 04:34 PM

not sure if this has changed, but running the following tests on this page i get .find and using a jQuery object as the “context” to be significantly faster:

var maxReps = 1000,
    selectorParent = '#primary',
    selectorChild = 'a';

/*
console.profile('nocontext'+maxReps);  
for(i=maxReps;i>0;i--){
    $(selectorChild).toggleClass('test');
}
console.profileEnd('nocontext'+maxReps);  
*/

console.profile('find'+maxReps);  
for(i=maxReps;i>0;i--){
    $(selectorParent).find(selectorChild).toggleClass('test');
}
console.profileEnd('find'+maxReps);  

console.profile('text'+maxReps);  
for(i=maxReps;i>0;i--){
    $(selectorChild, selectorParent).toggleClass('test');
}
console.profileEnd('text'+maxReps);  

console.profile('dom_el'+maxReps);  
var $context = $(selectorParent);
for(i=maxReps;i>0;i--){
    $(selectorChild, $context).toggleClass('test');
}
console.profileEnd('dom_el'+maxReps);  

console.profile('context'+maxReps);  
var context = $(selectorParent)[0];
for(i=maxReps;i>0;i--){
    $(selectorChild, context).toggleClass('test');
}
console.profileEnd('context'+maxReps);

By Jeremy S on Wednesday, July 28, 2010 at 09:01 PM