JS

Speed up your jQuery apps

Craig Bullock 22nd Nov 2011

jQuery along with a couple of other frameworks has almost revolutionised the use of Javascript. This has made powerful methods available to developers of all levels, but has also made it easy for clunky code to be written. The good news is that there is some very simple techniques that can be applied to speed up your apps.

Selector Optimisation

Selecting elements is one of jQuerys most powerful features. The ways in which you choose to select elements can have a massive impact on performance. For those that are familiar with the raw Javascript methods used to select DOM elements will find it easy to understand which jQuery selectors provide the best performance.

This selector is by far the quickest


$('#myElement');

This is because it hooks directly into the native Javascript method


document.getElementById.('myElemnt');


$('h1');
$('p');
$('span');

Are also high performing jQuery selectors as they will hook directly into the native Javascript function


document.getElementsByTagName('h1')

Selecting by classes can impact performance in older browsers. This selector


$('.myElements');

hooks into the Javascript method


document.getElementsByClassName('myElements');

The problem here is that getElementsByClassName was only introduced in IE9 and anything below uses much slower DOM scraping methods.

Selecting using attributes, names, values as well as Pseudo selectors can also be rather slow in olders browsers.


$('[attribute=value]');
$(':hidden');

The jQuery find() method can come in rather helpful, particuarly when using the selectors such as I have just mentioned.

For instance


$('#myElement').find(':hidden');

will be a lot faster than just the


$(':hidden');

This will be true for other selectors too such as


$('#myElement').find('h1');

which, will be faster than


$('#myElement h1');

This is mainly becuase using the find will limit the search that jQuery has to undertake.

Caching

Caching selectors can seriously speed up your jQuery. Everytime you call


$('.class')

the whole DOM is searched for the selector. To search the DOM only once and to cache the returned jQuery object you could simply write


var cachedSelector = $('.class');

And then, anytime you need it after that you can just refer to


cachedSelector.fadeIn();

and run any method you may need. A rule of thumb should be any selector that needs to be run more than once should be cached.

Chaining

Because the vast mojority of jQuery methods return a jQuery object it is possible to chain the methods one after the other. Chaining will be much faster than starting a new selector for each method, as the DOM will only be read once.

This is an example without chanining


$("#myElement").addClass("active");
$("#myElement").css("color","#66bb00");
$("#myElement").fadeOut();

What is happening here is that each line represents a new jQuery object having a method applied to it. The issue is that this is the same object selected from scratch each time. This will certainly have a large impact on performance.

By chaining the methods, we only need to scrape the DOM once, like so


$("#myElement").addClass("active").css("color","#66bb00").fadeOut();

Event Delegation

You will probably be very accustomed to applying an event like so.


$('#myElement').find('p').on('click', function() {
	// Do something
});

The problem with this is that every single element will have the event applied to it. This code can be significantly improved by using delegation like so


$('#myElement').on('click', 'p', function() {
// Do something
});

By delegating we are not applying the event to every matched element, but simply to the descendents of the parent. Essentially this means the event is only being applied once instead of multiple times.

DOM Manipulation

DOM manipulation can often be the heaviest on performance with clunky code.


$(myArrayOfElements).each(function(i,el) {
	var row = '<li>' + $(el).html() + '<li>';
	$(row).appendTo('#myElement');
});

This can have serious implications to the performance of your app''s. Everytime you loop around the array you are modifying the DOM.

To improve upon this you can simply modify the DOM once, like so.


var html = '';
$(myArrayOfElements).each(function(i,el) {
	html += '<li>' + $(el).html() + '<li>';
});
$(html).appendTo('#myElement');

Most of the time the difference with using these techniques will not make a huge noticable difference. But when it comes to large jQuery apps that have not been optimised they will feel very clunky to the user, so it is best practice for these methods to be used from the get go.

(0) Comments

This article has not received any comments yet.

Have your say

Say Hello