How to not over-use jQuery?

Question

Typical jQuery over-use:

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

Which can be simplified to:

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

Which is way faster.

Can you give me any more examples of similar jQuery over-use?

Answer 1

The second way is faster of course, as it's getting the id property straight from the DOM object, therefore there is at least one less function call.

That said, the difference would anyhow be imperceptible and nothing to fret over, and so I will venture to say that the first example is not an example of overuse.

Answer 2

IMHO, these aren't things to worry about.

The $ function is incredibly fast, and guarantees cross-browser problems are not going to be a problem. For example, that might work fine right now, but what happens if IE9 comes out and breaks it? If you're using the $ function everywhere, then a fix in one place fixes it everywhere. Not to mention, I can't imagine a case where this would get you any sort of performance increase.

Therefore, unless you're having issues with performance, don't worry about micro-optimizations. jQuery 1.4 had some huge performance increases anyway, so unless you're doing:

$('p>a:first-child+input[type=text]~span');

all over the place without caching, you're not going to get any return on your time investment.

Answer 3

The example in the question is over-use IMO not because of performance concerns, but because the plain JavaScript version is considerably more readable.

Similarly, td.cellIndex and tr.rowIndex are much more readable (as well as faster) than the commonly-given hacks like $(this).parent().children().index(this), and simple properties like this.checked is IMO better than $(this).is(':checked').

Within jQuery itself, you should prefer to use jQuery wrapper methods rather than the versions wrapped into non-standard selectors.

$('#thing .thing').last()

can be fast because the selector will be handed off to the fast built-in querySelectorAll call on modern browsers.

$('#thing .thing:last')

will be relatively slow.

Also watch out for selector string-slinging, which is usually a bad thing:

$('div.'+className)

is going to break as soon as there's a className with a dot (or various other punctuation) in it. Avoid making a selector string if there's a more reliable way to test.

Answer 4

"We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil"

                                -- Donald Knuth (probably)

From a performance standpoint, it probably falls within the 97%.

"There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult."

                                -- C.A.R. Hoare

From a complexity standpoint, simplicity, clarity, and understandability are good motivations.

Answer 5

jQuery over-use ?

Do not do this

$('.link').click(function(){
  $(this).attr("height", "99px");
  $(this).attr("width", "302px");
  $(this).css("left", "329px");
  $(this).attr("position", "absolute");
  ...
});

do this instead

  .my-class {
    background:url("/images/bg.png") no-repeat scroll 0 0 transparent;
    height:99px;
    left:329px;
    position:absolute;
    top:419px;
    width:302px;
  }

 $('.link').click(function(){
       $(this).addClass('my-class');
   });

unless you absolutely have to [not knowing CSS is not a valid excuse]