3

Suppose I have an element matching ".foo".

<div class="foo"></div>

I've learned from experience the performance hit from calling finders more than once, as in, if I'm trying to change the same object several times.

$(".foo").doOneThing();
$(".foo").doAnotherThing();
$(".foo").doSomethingElse();
// Makes jQuery look for ".foo" three times, bad!

versus

$foo = $(".foo");
$foo.callAllThreeOfTheThingMethodsInThePreviousBlock();
// Calls $(".foo") only once, but occupies memory with a jQuery object version of the foo div.

My question is, how many times would you have to use this finder before setting aside memory to hold the jQuery object instead of making the jQuery method call again?

I ask since the other day I had made every finder I called more than once into a stored $object variable; my boss had said to instead use the finder rather than a stored object if I was only using the finder, say, two or three times. What's your take on this?

Huangism
  • 16,278
  • 7
  • 48
  • 74
Vardarac
  • 563
  • 2
  • 17
  • It makes no sense to find the same set of items three times, better save it to a local variable instead! – Matteo Tassinari Sep 10 '14 at 18:02
  • If appears more than once, I tend to lift a var for it. I do that for everything, even simple strings. Also `$(".foo").doOneThing().doAnotherThing().doSomethingElse();` would work too lol. <3 chaining. – RaphaelDDL Sep 10 '14 at 18:10
  • 1
    Just a little plunker to show how the two different ways will behave with a lot of operations. http://plnkr.co/edit/lb3Cew3j1p5HE5goCgqd?p=preview – Pr0gr4mm3r Sep 10 '14 at 19:05
  • Just the plunker by Pr0gr4mm3r is already a good reason. Is small but yet, different by almost 3 times the speed. – RaphaelDDL Sep 10 '14 at 20:42
  • @RaphaelDDL when was the last time you noticed the difference between 50ms and 100ms? – C Bauer Sep 10 '14 at 20:50
  • @CBauer When I had to use a setTimeout for a jasmine test on a module that have a setTimeout internally just a while ago, why? – RaphaelDDL Sep 10 '14 at 22:10
  • @RaphaelDDL So it wasn't worrying about the relative speed difference of a cached jquery selector vs a regular selector on a class? – C Bauer Sep 10 '14 at 23:26
  • @CBauer Running on my Chrome, it had an improve from 140ms to 60ms. x2.33~ faster for a computing processes, that's huge. But for a human, that's irrelevant. Now remember that we had that difference on our awesome Intel/AND processors with large amount of RAM etc, imagine how much would be the difference on a Mobile, where not only resources are more scarce (crappy ARMs, little RAM, etc) but isn't only the processing time that will increase but also the latency of a 3G network downloading the assets. – RaphaelDDL Sep 11 '14 at 14:35
  • @CBauer Don't worry, I understood the issue you said about caching. Caching is bad when you are messing with the DOM too much. But when I lift, I lift the parent, so I can always use find() to go around, which does not have the caching issue as does not look like caches the childs. – RaphaelDDL Sep 11 '14 at 14:37
  • @RaphaelDDL I appreciate that, but people blindly saying "optimize from the beginning" are also the people most like to not realize they shouldn't play state-full games with their DOM manipulation. – C Bauer Sep 11 '14 at 14:47
  • @CBauer I always lift when using more than once. Isn't blindly, it's just a better management. In the company I work, where the website is too big and full of JS, where a big revenue comes from the website and the a big chunk of visits comes from iPad, we are obligated to do that whenever it happens. It's a good practice to optimize these from beggining, because other people will work on your file and they expect you to make the most efficient code. – RaphaelDDL Sep 11 '14 at 16:20

2 Answers2

3

Use var $foo = $(".foo");

Using $(".foo") multiple time will make jQuery repeat the search. Looks like jQuery doesn't cache selectors, and even if it did it is better to be smart yourself and not to rely on someone else.

Does jQuery do any kind of caching of “selectors”?

Community
  • 1
  • 1
kornieff
  • 2,389
  • 19
  • 29
  • 1
    I don't think jQuery caches selectors. If it does, that has to be some serious magic, since the dom could change and mess everything up.. – m59 Sep 10 '14 at 18:11
  • @m59 good point. edited. – kornieff Sep 10 '14 at 18:17
  • 2
    This is the right answer for the OP's use case, but it's worth noting that "saving" the jQuery object in a variable will cache the selection at the time the search was made - trying to use it again after DOM changes might give you unexpected results. – nrabinowitz Sep 10 '14 at 18:22
1

Storing the query result in variable is recommended in most situations where the query is repetetive. Depending on your situation, you can also call the functions in succession like so.

$(".foo").doOneThing().doAnotherThing().doAnotherThing();
Rainer Plumer
  • 3,693
  • 2
  • 24
  • 42