So why are we supposed to cache jQuery objects?

In the following scenario:

var foo = $('#bar');
foo.attr('style','cool');
foo.attr('width','123');

$('#bar').attr('style','cool'); $('#bar').attr('width','123');

Why is the first option so much better than the second option?

If it's because of performance, how does it reduce usage?

So why are we supposed to cache jQuery objects?

In the following scenario:

var foo = $('#bar');
foo.attr('style','cool');
foo.attr('width','123');

$('#bar').attr('style','cool'); $('#bar').attr('width','123');

Why is the first option so much better than the second option?

If it's because of performance, how does it reduce usage?

• javascript
• jquery
• performance
• caching

• 1 I think the first is just better if you use the $('#bar') multiple times, in your example, it's used just 1 time. So it should not have any advantage here. – King King Commented May 19, 2014 at 17:03
• @KingKing, oops, I edited it to include two actions. – ThePixelPony Commented May 19, 2014 at 17:04
• 1 From @mplungjan article found on the Google search results here is the relevant JSPerf test: jsperf.com/ns-jq-cached/3 – Jason Sperske Commented May 19, 2014 at 17:07
• Mhm. Google really did help! – ThePixelPony Commented May 19, 2014 at 17:08
• 1 As mentioned, caching the returned query results prevents multiple lookups (although in case of a # lookup, it is a pretty efficient getElementbyID), but purely for the sake of having mentioned it: JQuery helps by having its functions re-return the object, so attr returns the same object as was used, making the following possible: $('#bar').attr('style','cool').attr('width','100'); . Having the same advantage of reusing the query object. – Me.Name Commented May 19, 2014 at 17:17

2 Answers 2

Because the jQuery function has a lot of code in it, which involves unnecessary overhead if you execute it more than once with the same inputs expecting the same outputs. By caching the result, you store a reference to the exact element or set of elements you're looking for so you don't have to search the entire DOM again (even if it's a fairly fast search). In many cases (simple pages with small amounts of code) you won't notice a difference, but in the cases where you do it can become a big difference.

You can see this in action by testing your example in jsPerf.

You can also think of it as an example of the Introduce Explaining Variable refactoring pattern for readability purposes, particularly with more complex examples than the one in the question.

The jQuery selector $('#foo') searches the entire DOM for the matching element(s) and then returns the result(s).

Caching these results means that jQuery doesn't have to search the DOM every time the selector is used.

EDIT: document.getElementById() is what jQuery uses to search the DOM, but there's never enough jQuery.