11

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?

ThePixelPony
  • 721
  • 2
  • 8
  • 30
  • 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 May 19 '14 at 17:03
  • @KingKing, oops, I edited it to include two actions. – ThePixelPony May 19 '14 at 17:04
  • 1
    From @mplungjan article found on the Google search results here is the relevant JSPerf test: http://jsperf.com/ns-jq-cached/3 – Jason Sperske May 19 '14 at 17:07
  • Mhm. Google really did help! – ThePixelPony May 19 '14 at 17:08
  • You're not caching the selector. The selector is just the string you provide. You're caching the jQuery object that holds the DOM element. – cookie monster May 19 '14 at 17:15
  • 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 May 19 '14 at 17:17

2 Answers2

19

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.

C. Spencer Beggs
  • 519
  • 5
  • 9
David
  • 208,112
  • 36
  • 198
  • 279
0

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.

ThePixelPony
  • 721
  • 2
  • 8
  • 30
  • 2
    The spirit of your answer is correct but in the specific instance of an ID selector jQuery is just using [`document.getElementById()`](https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById) – Jason Sperske May 19 '14 at 17:09