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.
