What is the cost to convert a javascript variable to jQuery Object? - Stack Overflow

admin管理员组

文章数量:1355068

Sometimes I see in Javascript functions that, if the conversion of a variable to jQuery is used repeatedly, then it can be assigned to a local variable first:

$variable = $(variable);

Is this necessary, and how much is the cost of conversion?

Sometimes I see in Javascript functions that, if the conversion of a variable to jQuery is used repeatedly, then it can be assigned to a local variable first:

$variable = $(variable);

Is this necessary, and how much is the cost of conversion?

• javascript
• jquery

Share Improve this question Follow edited Apr 25, 2013 at 19:09 Ian 50.9k1313 gold badges104104 silver badges111111 bronze badges asked Apr 25, 2013 at 18:40 Adventitious Angles Qs PosterAdventitious Angles Qs Poster 67188 silver badges2222 bronze badges 25

• 5 @PeeHaa埽 If jQuery is slow, why would you want to call it repeatedly instead of saving the result in a variable? – Barmar Commented Apr 25, 2013 at 18:42
• 1 That was just my moronic typing / reading :P Cache when possible. – PeeHaa Commented Apr 25, 2013 at 18:43
• 1 Not caching the jquery object is slow. – PeeHaa Commented Apr 25, 2013 at 18:43
• 1 @PeeHaa埽 see jsperf./non-cache-vs-cache/2 - curiously the version using $(div) without caching where div is a DOM element is actually fastest on my version of chrome. – Alnitak Commented Apr 25, 2013 at 18:53
• 3 @AlexandreWiechersVaz No, there's no technical difference between a variable that begins with $. It's just a naming convention to use $xxx to represent jQuery objects. – Barmar Commented Apr 25, 2013 at 18:54

 |  Show 20 more ments

3 Answers 3

Sorted by: Reset to default 6

No matter what, storing the object is faster than having to re-instantiate a jQuery object every time you want to use jQuery methods on it...even if it's miniscule for caching $(this) or $(anObject).

A term used to describe this method of "store now, use later" is "caching". The reason it's often called "caching" is because caching refers to storing a reference to something once and using that, without going back out to grab the same thing again, later (very non-technical, non-100% accurate description).

The major point is dealing with selectors. jQuery has to query the DOM every time, which is the expensive part. Generating the object and storing references isn't that expensive pared to DOM manipulation (and jQuery processing your selection in the first place).

If you're simply creating a jQuery object out of an object reference, it's not nearly as devastating, as the processing that takes place is the creation of the jQuery object...so it's really limited to whatever jQuery does for that. It's still good practice and still prevents some unnecessary processing. For example, this:

var element = document.getElementById("div_id");
$(element).someMethod();
// Later:
$(element).someOtherMethod();

is slightly inefficient, since a new jQuery object is created each time. It could easily be condensed to store a reference to a single jQuery object in a variable, and reference that.

The one caveat I can think of is that it isn't a live list of elements (if selecting DOM elements). For example, you may want to cache all elements with the class testing-class, like so:

var myelements = $(".testing-class");

But if another element is added to the DOM with the testing-class class, myelements will not be reflected. It will have the same, previous list. So in that case, the DOM will obviously need to be re-queried and update myelements.

To me, the best practice for caching is within a scope....not the entire page. If you are running a function, and it selects some elements, cache it at the beginning, and use that. But don't cache it globally and use it throughout your page; cache it for an execution cycle.

For example, I would do this:

function someFunc() {
    var elements = $(".class-stuff");
    // Use `elements` here

    // code

    // Use `elements` here
    someOtherFunc(elements);
}

function someOtherFunc(el) {
    // Use `el` here
}

someFunc();

// Some time later:
someFunc();

but I wouldn't do this:

var elements = $(".class-stuff");

function someFunc() {
    // Use `elements`
}

function someOtherFunc() {
    // Use `elements`
}

someFunc();
someOtherFunc();

// Some time later
someOtherFunc();

It depends on what the variable is. If the original variable is just a single DOM element then it's not particularly expensive - the DOM traversal has already been done so all you're doing is wrapping that element in the jQuery pseudo-array and attaching the prototype.

However if the original variable is a selector, then you absolutely should cache the result to avoid repeated conversions from DOM -> element list.

In any event, it's good practise not to repeat yourself, so caching $(variable) is just good code hygiene.

If the $(variable) is being called anyway this assignment has basically no cost -- this is only storing a reference to the object in memory.

Purists might point out that because the jQuery object is now stored it can't be garbage collected, and this is true. So I guess if you had lots of these it could cause a memory issue, but in itself it has no cost to speak of.

The reason it is done is because there is a cost associated with creating the object, that is the $(variable) part. That if done many times could be expensive. Store a reference to the object means only one needs to be created.

Another important point: The following statement

var $variable = $(variable);

could act different if it is done in a calling context of a closure. That is if there is a function defined in the scope of the var statement that variable will "stick around" for the function to use. This could have the same effects as described above (no gc and pointer memory) with the addition of a longer lifetime. (Because it will stay as long as the function has potential to be called.)

本文标签： What is the cost to convert a javascript variable to jQuery ObjectStack Overflow