jQuery is an amazing tool that is made JavaScript accessible to developers and designers of all levels of experience. It allows you to build the functionality of web applications with the minimum amount of code, saving you lots of time in the process. I have noticed that a few small changes to my standard way of using jQuery have made my code run a lot faster.

Other useful jQuery articles:

Following is the easy steps that will improve your script’s performance.

Selector Performance Tip

jQuery selectors should get more specific from left to right. Selectors are parsed in reverse order, so making sure that your most specific selector is on the right will increase performance.

The example below shows how not to write a jQuery selector using this technique:

$('p#item b').each(function() {
// stuff here
});

In the above example, jQuery finds all elements of type ‘b’ and then looks to see if the have a parent of p#item.

Instead, it is recommended that you use the find function to speed up your jQuery. This took my 15,000 element document parsing time from 10 seconds to about 1;

$('p#item').find('b').each(function() {
// stuff here faster
});

This example does the opposite, finding a elements matching p#item and looking in their children using the find() function to find all elements of type ‘b’.

Always Use $(this)

If you are using a selector to traverse the DOM in search of an element to perform a specific function on, that element becomes stored and can be manipulated within the function by using $(this).

This code will traverse the DOM twice to get the same element;

$("#item").click(function() {
$("#item").addClass('myItem');
});

This is the efficient way since the element is already stored within the $(this) call;

$("#item").click(function() {
$(this).addClass('myItem');
});

Cache jQuery Objects

jQuery selectors make selecting any element on the page incredibly simple, but internally they have to do a fair amount of work and if you go mad with them you might find things starting to get pretty slow.

for (i = 0; i < 500; i++) {
var myList = $('.myList');
myList.append('List item ' + i);
}

Do something pretty slow in JavaScript terms. Now take a look at the following code where we use the selector just once.

var myList = $('.myList');
for (i = 0; i < 500; i++) {
myList.append('List item ' + i);
}

Much more faster, just by moving one line of code. My advice: Any selector that gets run more than once should be cached.

Avoid DOM Manipulation

Avoid using DOM manipulation, it’s time-consuming like append(), prepend(), after().

var myList = '';
for (var i=0; i<500; i++) {
myList += '<li>'+i+'</li>';
}
('#myList').html (myList); // Do something faster

Pass Multiple Selectors

If same functions is repetitive on multiple elements, it is possible to group selectors together to increase the performance.

// slower
$("p#A").fadeIn();
$("p#B").fadeIn();
$("p#C").fadeIn();

// faster
$("p#A, p#B, p#C").fadeIn();

Return False

When a function do not return a false value, it jump to the top of the page and when working with the longer pages, the result can be annoying.

// bad approach
$('#item').click (function () {
// stuff here
});

//good approach
$('#item').click (function () {
// stuff here
return false;
});

In Closing

These are just a few things that have helped me make my jQuery code run more efficiently. There are hundreds of books and resources that can help you take jQuery to the next level to create the most efficient jQuery code. If you have any comments or more advice, do feel free to comment!