Learn some good practices to write clean and fast jQuery code.

Optimize your jQuery code with a couple of tips

If you're looking at drastic improvements in speed there are some factors to consider i.e:

  • How efficient your code is
  • How efficient the browser's JS interpreter is
  • How quick the computer running the code is

However, there are simple tricks which do make for better execution, even if its only 100 or so milliseconds:

1) Save a query in a variable if you need it later

Let's suppose that you have a button and is necessary to apply some CSS properties.

$("#button").css('color','white');
$("#button").css('width','100%');
$("#button").css('background-color','green');

The previous example executes 3 times the same query to the DOM searching for a button with id 'button', at naked eye this not even so bad. But what would happen if you execute that query in a loop?

for(var i = 0;i < 100;i++){
    $('#list').append("<li>"+i+"</li>");
}

The query was executed 100 times ! You can cache the query before as a good practice :

var list = $("#list");
for(var i = 0;i < 100;i++){
    list.append("<li>"+i+"</li>");
}

2) When your query use a class selector, give a limited area to search for it

When a class selector is used , is of presumably you need to select more than 1 DOM object like this

$(".mydivision");

However, is a good practice to give to your query a context to make the search quickly, otherwise jQuery will lookup over all the Document searching for the objects of our class, apply instead :

$(".mydivision","#mydivision-container");

of this way jQuery will only focus in the given container and the query will be executed faster.

3) Chain your jQuery functions most as possible

Execute functions over a selector goes quickly if are executed with the returned object instead executing another query

$("#button").css('color','white');
$("#button").addClass('greenButton');
$("#button").show('slow');

Like the first mentioned point, the query is executed 3 times, so you will rather chain those functions in its place :

$("#button").css('color','white').addClass('greenButton').show('slow');

4) Minify your javascript files and combine them in 1 file

Increase the speed of load of your scripts,  therefore you give more miliseconds to your scripts to be executed.

5) Use the native for method instead $.each

Execute the following example in the console of your browser.

var array = []; //Adding an array with 1000 items
for (var i=0; i<10000; i++) {
    array[i] = 0;
}
 
console.time('nativeFor');
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
}
console.timeEnd('nativeFor');
 
console.time('jqueryEach');
$.each (array, function (i) {
    array[i] = i;
});
console.timeEnd('jqueryEach');

You will notice that the native for is about 5 times faster as the jQuery each method. Finally we recommend you to load always the latest version of jQuery which can be obtained from the official jQuery website.


Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Sponsors