jQuery Optimization/Best Practices

Question

Ok saddle up cowboys, because this is going to be a long one. I have been spending the morning going through some of my old code and I'm left wondering about best practices and optimzation. In order to avoid a ride down subjective lane I'll just post some examples with some hopefully easy to answer questions. I will try to keep the examples very simple for ease of an answer and to decrease the likelihood of mistakes. Here we go:

1) Assignment vs jQuery Calls

I understand that when accessing selectors it's generally considered better to assign a selector to a variable rather than make the same call more than once - ex.

$('div#apples').hide();
$('div#apples').show();

vs.

var oranges = $('div#oranges');
oranges.show();
oranges.hide();

Does this same rule apply when referencing jQuery's $(this)? Ex. A simple bit of script to make some data in a table clickable and customize the link.

$('tr td').each( function() {
    var colNum = $(this).index();
    var rowNum = $(this).parent().index();
    $(this).wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
})

vs.

$('tr td').each( function() {
    var self = $(this);
    var colNum = self.index()
    var rowNum = self.parent().index()
    self.wrap('<a href="example.com/hello.html?column=' + colNum + '&row=' + rowNum +'">'); 
});

2) this vs $(this)

Ok so this next one is something that I have wondered about for a long time but I can't seem to find any information on it. Please excuse my ignorance. When does it make sense to call the vanilla js this as opposed to the jQuery wrapped $(this)? It's my understanding that -

$('button').click(function() {
  alert('Button clicked: ' + $(this).attr('id'));
});

Is much less efficient than accessing the DOM attribute of the vanilla this object like the following -

$('button').click(function() {
  alert('Button clicked: ' + this.id);
});

I understand what is going on there, Im just wondering if there is a rule of thumb to follow when deciding which to use.

3) Is more specificity always better?

This one is pretty simple, is it ALWAYS beneficial to be more specific with our selectors? It's easy to see that $('.rowStripeClass') would be much slower than $('#tableDiv.rowStripeClass'), but where do we draw the line? Is $('body div#tableDiv table tbody tr.rowStripeClass') faster still? Any input would be appreciated!

If you've made it this far, thanks for taking a look! If you haven't, :p ​

Answer 1

I'll try to answer these as concisely as possible:

1. Cache it when it's used often, especially in a loop situation, running the same code to get the same result is never a good thing for performance, cache it.

2. Use this when you only need a DOM element and $(this) when you need the jQuery methods (that wouldn't be available otherwise), your example of this.id vs $(this).attr("id") is perfect, some more common examples:

   • Use this.checked instead of $(this).is(':checked')
   • Use $.data(this, 'thing') instead of $(this).data('thing')
   • Any other case where creating a jQuery object isn't useful basically.

3. Decending from an ID selector is preferred for performance...how specific do you need to be? That completely depends, in short: be as specific as you need to be.