CODEWITHSUNDEEP
javascriptjquery
Deniz Dogan
Deniz Dogan

Reputation: 26227

JQuery/JavaScript performance using $(this)

I find myself doing a lot of this kind of JQuery:

$('.filter-topic-id').each(function () {
    var me = $(this);
    if (me.text() == topics[k]) {
        me.parent().show();
    }
});

I store $(this) in a variable called me because I'm afraid it will re-evaluate $(this) for no reason. Are the major JavaScript engines smart enough to know that it doesn't have to re-evaluate it? Maybe even JQuery is smart enough somehow?

Upvotes: 2

Views: 167

Answers (6)

bobince
bobince

Reputation: 536359

Are the major JavaScript engines smart enough to know that it doesn't have to re-evaluate it?

No. But if you are using jQuery you are presumably aiming for readability rather than necessarily maximum performance.

Write whichever version you find easiest to read and maintain, and don't worry about micro-optimisations like this until your page is too slow and you've exhausted other more significant sources of delay. There is not a lot of work involved in calling $(node).

Upvotes: 2

nickf
nickf

Reputation: 546025

I think you'll find that calling the jQuery function by passing a dom element is perhaps the least-intensive of ways to construct the object. It doesn't have to do any look-ups or query the DOM, just wrap it and return it.

That said, it definitely doesn't hurt to use the method you're using there, and that's what I do all the time myself. It certainly helps for when you create nested closures:

$('div').click(function() {
    var $this = $(this);
    $this.find("p").each(function() {
        // here, there's no reference to the div other than by using $this
        alert(this.nodeName); // "p"
    });
});

Upvotes: 0

AnthonyWJones
AnthonyWJones

Reputation: 189457

There is no good way that a javascript can determine that the following is true:-

fn(x) == fn(x);

Even if this was possible not calling the second fn could only be valid if it could be guaraneed that fn has not have other side-effects. When there is other code between calls to fn then its even more difficult.

Hence Javascript engines have no choice but to actually call fn each time it is invoked.

The overhead of calling $() is quite small but not insignificant. I would certainly hold the result in a local variable as you are doing.

Upvotes: 1

Russ Cam
Russ Cam

Reputation: 125488

They are not smart enough to know not to revaluate $(this) again, if that's what your code says. Caching a jQuery object in a variable is a best practice.

If your question refers to your way in the question compared to this way

$('.filter-topic-id').each(function () {
    if ($(this).text() == topics[k]) { // jQuery object created passing in this
        $(this).parent().show(); // another jQuery object created passing in this
    }
});

your way is the best practice.

Upvotes: 3

Keeper
Keeper

Reputation: 3566

You could try to profile your code with Firebug and see if using $(this) many times slows your app or not

Upvotes: 1

Philippe Leybaert
Philippe Leybaert

Reputation: 171764

this is just a reference to the current DOM element in the iteration, so there's little or no overhead involved when calling $(this). It just creates a jQuery wrapper around the DOM element.

Upvotes: 0

Related Questions