Optimize your jQuery code with a couple of tips

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.

Become a more social person