As it stands, jQuery is an amazingly efficient JavaScript framework, but there are a few things that you can do when creating your code that will end up slowing it down significantly. I’ve noticed that a few small changes to my standard way of using jQuery have made my code run a lot faster.

1. Be More Specific with Selectors

When you are setting up jQuery to search through the DOM for a specific element, the more information you give it, the faster it will find the element. It is also faster to use IDs instead of classes.

Something like this will require going through the whole DOM structure to find the element:

$(".item")

These are way more efficient:

$("#item") // use IDs instead of Classes
$("p.first .item") // be more specific with the location

2. 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('clicked');
});

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

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

3. Pass Multiple Selectors

If you want the same functions to occur on multiple elements, it is possible to group selectors together to increase performance and avoid repetitive traversing of the DOM.

// bad
$("p#one").fadeIn();
$("p#two").fadeIn();
$("p#three").fadeIn();

// good
$("p#one, p#two, p#three").fadeIn();

4. Use Multiple Properties and Values

Many jQuery methods accept multiple properties and values instead of just a single property and value pair. Including multiple properties will help speeds things up as it reduces the amount of jQuery objects that are created within your code.

// bad
$("img#one").attr('src', 'http://mysite.com/images/image.jpg');
$("img#one").attr('alt', 'My Image');

// good
$("img#one").attr({
  'src': 'http://mysite.com/images/image.jpg',
  'alt': 'My Image'
});

5. Add Styles with Classes or IDs

If you want to add multiple style changes to an element, it make more sense to use CSS to assign your styles to a Class or ID, and then add that Class or ID to the element.

Create your styles:

<style type="text/css">
.faster {
  background: #dd0000;
  color: #fff;
  padding: 5px 8px;
  }
</style>

And instead of doing this:

$("p").css({
  'background': '#dd0000',
  'color': '#fff',
  'padding': '5px 8px'
});

Do this:

$("p").addClass("faster");

6. Use Chaining

Once you have already selected an element, you can chain your commands using .end() instead of traversing the DOM multiple times to find the same element. Understanding chaining might take a bit of trial and error to really get the hang of it. Certain commands require that you .end() the chain and certain don’t. I’ll give more in depth tutorial on chaining in the future to help guide you through the ins and outs of it all.

//bad
$("div").fadeIn();
$("div p.one").slideDown();
$("div p.two").addClass('highlight');

//good
$("div")
  .fadeIn()
  .find('p.one')
  .slideDown()
.end()
  .find('p.two')
  .addClass('highlight');

These are just a few things that have helped me make my jQuery code run more efficiently. There are tons of books and resources out there that can help you take it to the next level to create the most efficient jQuery code imaginable. Here are a few I suggest: