Performance of jQuery selector with context

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

Answer 1

It would make sense that it would take longer to use a context (vs. using a selector alone) since internally, the context uses the .find() method, so in essence, all you are really doing is

$('#context').find('#holder');

I mainly see it as an easier way to identify elements in events and iterators where the context changes because

$('.holder', this)

is prettier than

$(this).find('.holder')

Answer 2

Be careful before you going to refactor your code. As in the #NOTE written, jQuery since 1.4 works quite different way. The latest version may contain even more optimizations.

I modified the jsbin code above to have the recent jQuery, and added some additional cases as well. You will see, now only those three (2,3,6) cases got performance penalty which creates one more jQuery object per round. Rest runs in quite same time.

You can find the modified version here: http://jsbin.com/aciji4/63/

Answer 3

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

Answer 4

I've taken the JSBin code and put it into a jsPerf Test

$context.find('.holder') is twice as fast as its closest competitor, $('.holder', $context) and that is a good ten times faster than any other selector being used.

In conclusion, cache your selectors and use .find() for maximum performance

Answer 5

The #ID selector relies on the browser native document.getElementById. It's going to be fast no matter what.

Try a selector like div.class[attribute=value] with and without a context. For example*, you could select the "Related" question links to the right with this selector:

// Selects anchor elements with href's beginning with /questions/
$('a[href^=/questions/]')

But, it's faster to limit how many anchor elements the selector engine has to iterate over, evaluating that relatively expensive text matching:

$('a[href^=/questions/]', '.related')

* And ignoring the obviously easier .question-hyperlink class on those links, for the sake of discussion.

Answer 6

For what it's worth, $context = $("#context") is still using a jQuery object, which then has to be converted to a DOM object.

If you use $context = $("#context")[0] you'll find that it runs just as fast as the first test.