What's the performance benefit of assigning JQuery object to a variable?

Question

Somebody saw me using the following JQuery code:

function showAll(){
    $(".button").show();
}
function hideAll(){
    $(".button").hide();
}

And he said that this was a waste of resources. That I should first assign $(".button") to a variable, and then perform the show() and hide() methods on this variable like this:

var allButtons = $(".button");
function showAll(){
    allButtons.show();
}
function hideAll(){
    allButtons.hide();
}

Both versions work, but what is the performance benefit to this? I believe the benefit is negligible and, moreover, cumbersome because now you have another level of separation between the class name and the variable you're modifying, but does he have a valid point? Is one of the two considered best practice?

This is completely opinion-based, extremely dependent on your situation, and completely testable yourself. — user229044, Dec 12 '14 at 20:13
The obvious performance benefit is that you are searching for the elements only *once* when you store the object. — Felix Kling, Dec 12 '14 at 20:13
It's to cache the selector. Read some of these http://stackoverflow.com/search?q=jquery+cache — DanielST, Dec 12 '14 at 20:13
Apart from avoiding too many DOM queries: `$('.button')` does have the added benefit of matching any elements that were added later on to the DOM (AJAX responses and such) — Elias Van Ootegem, Dec 12 '14 at 21:04

Guffa · Accepted Answer · 2014-12-12T20:30:10.800

1

There are mainly three differences between the codes:

Performance. Yes, it's more performant to keep the set of elements instead of finding them each time.
Global names. Using a global variable to keep the set means a higher risk to conflict with other code. Each time you do this you have to make up a new name unique to the page/pages where you use it.
Difference in function. If you keep the set of elements it means that any elements added dynamically are not included in subsequent calls, and elements where the class is removed will still be included in the set. Creating the set each time means that you use the elements that match the selector at that time.

As the change actually changes the behaviour, you have to consider if it still does what you want it to do.

If you want to increase the performance you should consider if the code is in a place where it actually is possible to notice the difference, so that it's worth making the code slightly more complex.

edited Dec 12 '14 at 20:30

answered Dec 12 '14 at 20:24

Guffa

687,336
108
737
1,005

A selector _is_ a global variable. The DOM is just one large global namespace after all. – Benjamin Gruenbaum Dec 12 '14 at 20:26
@BenjaminGruenbaum: Yes, it is in the sense that any selector will have a meaning anytime that you use it. However, it only has a value when you use it, in between it doesn't retain any value like a variable does. Also, it's not changeable and the value is only readable, depending on the state in the DOM, so in that sense it's more like a read-only property that gets its value from other members. – Guffa Dec 12 '14 at 20:34
How is it only readable? – Benjamin Gruenbaum Dec 12 '14 at 20:40
@BenjaminGruenbaum: The selector can only be used to get a value, there is nothing that you can do to the selector itself that will affect the DOM. – Guffa Dec 12 '14 at 20:56
To the selector? No, but once you select it you can change it and it will reflect in different selections in the future. Just like in `window["bracketNotation"]` if you change the value inside the quotation signs it won't change the variable but if you change the value it will reflect in the future. – Benjamin Gruenbaum Dec 12 '14 at 21:14
@BenjaminGruenbaum: Yes, getting a result using a selector is kind of like getting the value from a variable using the name of the variable. The difference is that you can't use the selector to set a value; where `window["bracketNotation"] = 42;` will assign a value directly to the variable, there is no such operation using a selector. – Guffa Dec 12 '14 at 21:32

What's the performance benefit of assigning JQuery object to a variable?

1 Answers1