Writing Better jQuery Code

By Mathew Carella

There are a lot of articles that discuss jQuery and JavaScript performance. However, in this article I plan to summarize a bunch of speed tips and some of my own advice to improve your jQuery and JavaScript code. Better code means faster apps and jank free websites. Fast rendering and reactivity means a better user experience.

First of all, it is important to keep in mind that jQuery is JavaScript. This means we should adopt the same coding conventions, style guides and best practices for both of them.

First of all, if you are new to JavaScript, I recommend that you to read this article on JavaScript best practices for beginners and this one on writing high quality JavaScript before starting to mess with jQuery.

When you are ready to use jQuery, I strongly recommend that you follow those guidelines:

Var Caching

DOM traversal can be expensive, so try to cache selected elements when they will be reused.

// bad

h = $('#element').height();
$('#element').css('height',h-20);

// good

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

Avoid Globals

With jQuery, as with JavaScript in general, it is best to ensure that your variables are properly scoped within your functions.

// bad

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// good

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

Use Hungarian Notation

Putting the dollar symbol at the front of variables makes it easy to recognize that this item contains a jQuery object.

// bad

var first = $('#first');
var second = $('#second');
var value = $first.val();

// better - we use to put $ symbol before jQuery-manipulated objects

var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

Use Var Chaining (Single Var Pattern)

Rather than having multiple var statements, you can combine them into a single statement. I suggest placing any variables without assigned values at the end.

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

Prefer ‘On’

Recent versions of jQuery have changed whereby functions like click() are shorthand for on('click'). In prior versions the implementation was different whereby click() what shorthand for bind(). As of jQuery 1.7, on() is the preferred method for attaching event handlers. However, for consistency you can simply use on() across the board.

// bad

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

// better
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

Condense JavaScript

In general, it is preferable to try to combine functions wherever possible.

// bad

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

// better

$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

Use Chaining

Following on the above rule, jQuery makes it easy to chain mathods together. Take advantage of this.

// bad

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

// better

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

Keep Your Code Readable

When trying to condense your scripts and utilize chaining, code can sometimes become unreadable. Try to utlize tabs and new lines to keep things looking pretty.

// bad

$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// better

$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

Prefer Short-circuiting

Short-curcuit evaluation are expressions evaluated from left-to-right and use the && (logical and) or || (logical or) operators.

// bad

function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

// better

function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

Prefer Shortcuts

One of the ways to condense your code is to take advantage of coding shortcuts.

// bad

if(collection.length > 0){..}

// better

if(collection.length){..}

Detach Elements When Doing Heavy Manipulations

If you are going to do heavy manupipulation of a DOM element, it is recommended that you first detach it and then re-append it.

// bad

var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first(); 
//... a lot of complicated things

// better

var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach(); 
//...a lot of complicated things

$container.append($element);

Know the Tricks

When using methods within jQuery that you may have less experience with, be sure to check the documentation as there may be a preferable or faster way to use it.

// bad

$('#id').data(key,value);

// better (faster)

$.data('#id',key,value);

Use Subqueries Caching Parents

As mentioned earlier, DOM traversal is an expensive operation. It is typically better to cache parent elements and reuse these cached elements when selecting child elements.

// bad

var 
    $container = $('#container'),
    $containerLi = $('#container li'),
    $containerLiSpan = $('#container li span');

// better (faster)

var 
    $container = $('#container '),
    $containerLi = $container.find('li'),
    $containerLiSpan= $containerLi.find('span');

Avoid Universal Selectors

When combined with other selectors, the universal selector is extremely slow.

// bad

$('.container > *'); 

// better

$('.container').children();

Avoid Implied Universal Selectors

When you leave off the selector, the universal selector (*) is still implied.

// bad

$('.someclass :radio'); 

// better

$('.someclass input:radio');

Optimize Selectors

For example, using an ID should already be sufficiently specific, so there is no need to add additional selector specificity.

// bad

$('div#myid'); 
$('div#footer a.myLink');

// better
$('#myid');
$('#footer .myLink');

Don’t Descend Multiple IDs

Again, when used properly, ID’s should be sufficiently specific not to require the additional specificity of multiple descendant selectors.

// bad

$('#outer #inner'); 

// better

$('#inner');

Try to Use the Latest Version

The newest version is usually the best one: sometimes lighter and sometimes faster. Obviously, you need to account for compatibility with the code you are supporing. For example, don’t forget that from version 2.0 there’s no more support for IE 6/7/8.

Don’t Use Deprecated Methods

It is important to always keep an eye on deprecated methods for each new version and try avoid using them.

// bad - live is deprecated

$('#stuff').live('click', function() {
  console.log('hooray');
});

// better
$('#stuff').on('click', function() {
  console.log('hooray');
});

Load jQuery Code from a CDN

The Google CDN quickly delivers the script from the user’s nearest cache location. To use the Google CDN, use the following url for this https://code.jQuery.com/jQuery-latest.min.js

Combine jQuery with Native JavaScript When Needed

As I was saying before, jQuery is JavaScript, and this means that in jQuery we can do the same things we do with native JavaScript. Writing in native (or vanilla) JavaScript can sometimes mean less readable and less maintainable code and longer files. But it also can mean faster code. Keep in mind that no one framework can be smaller, lighter and faster than native JavaScript operations. (Note: click the image to run the test)

Due to this performance gap between vanilla JavaScript and jQuery, I strongly recommend mixing both of them in a wise way, using (when you can) the native equivalent of jQuery functions.

Final Considerations

Finally, I recommend this article on increasing jQuery performance that includes a number of other good practices that you will find interesting if you want a deeper look about the topic.

Keep in mind that using jQuery isn’t a rquirement, but a choice. Consider why you are using it. DOM manipulations? Ajax? Templating? CSS animations? A selector engine? Sometimes, it may be worth considering a micro JavaScript framework or a jQuery’s custom buildthat is specifically tailored on your needs.

This article was originally published at https://blog.mathewdesign.com/2013/11/14/writing-performant-and-quality-jquery-code/