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.


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++){

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++){

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


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 :


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


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


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;
var l = array.length;
for (var i=0;i<l; i++) {
    array[i] = i;
$.each (array, function (i) {
    array[i] = i;

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