Does jQuery $(this) need to be cached

Question

I recently came accross some blog posts about jQuery performance (i.e. http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/) and it was stated in all of them that we should cache the jQuery objects to javascript variables.

What I need to know, though, is if this applies to $(this) as well. Am I going to gain in performance if I do this:

$("#some-link").click("click", function(){
  var $this = $(this);
  $this.doSomeThing();
});

Thank you in advance for your help.

Answer 1

this may refer to many different objects.

Caching $(this) may not be important, because this is already the current element and thus jQuery does not need to search the DOM for this element.

However in a single function if you have more than one times calling $(this), it is wise to put $(this) to a variable instead of calling $(this) many times.

$("#some-link").click("click", function(){
  var $this = $(this);
  $this.doSomeThing();
  $this.doThisThing();
  $this.doThatThing();
});

would be more efficient than

$("#some-link").click("click", function(){
  $(this).doSomeThing();
  $(this).doThisThing();
  $(this).doThatThing();
});

Answer 2

Well, there's a performance cost to executing the function, running through the init logic and returning an object, albeit probably a very small performance cost, so in this particular case, the need to cache is probably not significant.

However, for the sake of code conformity, it is a good idea to cache objects that you use more than once as in other circumstances the performance difference can be significant, therefore getting into the habit is a good thing.

Answer 3

Caching this is always a good idea when accessing it multiple times. A thing to note about performance is that this is a JavaScript object--I've seen a lot of code which wraps a jQuery object around this for no reason at all.

Consider this snippet of code:

... (function ()
{
    alert($(this).attr("class"));
});

Versus the much cleaner and a bit faster:

... (function ()
{
    alert(this.className);
});

Update

In response to your update.. doing:

... (function ()
{
    var that = $(this);
    that.functionCall();
});

Does not increase performance. It's actually a tiny bit slower, since you are creating a variable on top of wrapping this in a jQuery object.

If you were to operate on that - the cached $(this) jQuery object - multiple times, you will see an increase performance.. depending on the number of operations:

... (function () // calling a function 1000 times on a cached jQuery object
{
    var that = $(this);

    for (var i = 0; i <= 1000; i++)
    {
        /* using a cache will greatly increase performance when
           doing 1000 operations. */
        that.functionCall(); 
    }
});

On a side-note: if you are interested in jQuery performance optimization, there's a lot of great tips in the jQuery Tips and Tricks question. Give it a go :)

Answer 4

That's actually a simple question, that regards javascript itself. If you assign a variable to a object that is gathered by running a function, and if you'll need to use that object several times, it's obvious that you'll increase performance.

Lessen the function calls and you're on the way to it :)

Answer 5

Well, if you use $this only once, it doesn't really help, but if you use it more that once, it should gain performance.

The big question is, how much performance? It's possible that it's hardly measurable. But it's a good practice to do so anyway.

Answer 6

My guess is that it would be useful if you were using $(this) multiple times.

In your example I don't think it's gonna make that big a difference.