CODEWITHSUNDEEP
jqueryperformance
Nikita Fedyashev
Nikita Fedyashev

Reputation: 18993

How to not over-use jQuery?

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?

Upvotes: 6

Views: 510

Answers (5)

sjobe
sjobe

Reputation: 2837

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]

Upvotes: 3

BJ Safdie
BJ Safdie

Reputation: 3419

"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.

Upvotes: 4

bobince
bobince

Reputation: 536389

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.

Upvotes: 2

Jerod Venema
Jerod Venema

Reputation: 44632

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.

Upvotes: 3

karim79
karim79

Reputation: 342635

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.

Upvotes: 8

Related Questions