Question

Pretty basic question.

I want to know if jQuery or raw JavaScript are smart enough to precompile, or cache variable expressions in functions, or selectors, and if not, are there any reasons that would stop them doing this?

e.g.

$('#whatever').on('click', function(){
    $('#template').click();
});

var n = 0;

for(var i = 0; i < 20; i++){
    n = 1 + 1;
    $('#whatever').click();
}

console.log(n);

Are we going to search the dom 20 times for the $('#template') element? or are the library/engine smart enough to store a pointer?

And, are we going to computer 1+1 2 times, or is that expression cached or precompiled?

---

Obviously these are really dumb examples, but they get the point across.

Yes, no one is going to have the line (hopefully) n = 1 + 1 in their code.

And we could change the code to have `var template = $(‘#template’); before the click handler if it doesn’t deal with it itself, but I am wondering do we/ why we have to do that?

Answer 1

First off, jQuery is javascript. jQuery does not and cannot add features to JavaScript as a language.

With that being said, JavaScript is ECMAScript, and also implemented differently in every browser. It would be very difficult (if not impossible) for me to tell you anything about what level of caching a JavaScript implementation has, because as a language, there isn’t any prescribed behavior.

I think it would make sense to cache references to DOM elements for performance reasons, but I cannot speak to what each separate implementation does behind the scenes.

As far as jQuery is concerned, there is no magical selector caching happening in the current version as far as I’m aware. Every time $(...) is called, it has to re-evaluate the selector. The selector could be a simple css-style selector, e.x. $('#foo .bar baz'), or it could be an element fragment, e.x. $('<div>foo bar baz</div>').

If the jQuery function is passed a selector, it would have to re-check the DOM because new elements may have been added that could match the selector, or existing elements may have changed to no longer match the selector.

As far as caching jQuery objects goes, it is common to save a reference to a jQuery object, and in some circumstances is more performant. The only way to know for sure which method is better is to run the script with a performance analyzer and see where the bottlenecks are. There’s no reason to just assume that writing your code in one particular way will improve the performance of your code.

If you’re just trying to perform a series of operations on the same selection, be sure to take advantage of jQuery’s method chaining:

$('.selector').addClass('foo').removeClass('bar').click(function () {...});

jQuery methods typically return the original selection as a return value, which allows for a very elegant simplification of code.