Today I've watched a slides from a great presentation whose author is Addy Osmani. Slides can be found here: jQuery Proven Performance Tips And Tricks (Slides). I strongly recommend watching it (with all linked tests on http://jsperf.com) and if necessary read my short summary posted bellow.

  1. Stay up to date

    • If it's possible try to use the latest version of jQuery.

    • If you're updating library check if all plug-ins still work, if not - look for a plug-in updates.

    • New releases of jQuery can be divided into two groups. If a second number is changed (1.3 => 1.4) we can expect a new features and a performance improvements, also a chance of lack of compatibility with currently used plug-in is quite high. If a third number is changed it means we're dealing with a bug fixes so some problems can be fix and there shouldn't be any problems with a compatibility. Of course we shouldn't expect any speed improvements.

  2. Use the fastest selectors

  3. Choosing the best method for obtaining children and parents

    • If you want to find a children of a given element you got at least a few methods to chose from. You can use context (created or cached), children() method, find() method or use all kinds of selectors based on CSS.

    • According to Addy Osmani find() method used on a cached parent element is generally the fastest one. It'll be the best in most cases but really it depends on situation... so to be sure, you have to check it anyway. selectors-comparation

  4. Try to use plain JavaScript

    • For simple task such as retrieving value of ID attribute it's faster to do it by yourself in pure JS that doing it in jQuery which will do it in JS anyway spending more time on it.

  5. Cache elements

    • Traversing through DOM tree can be time-consuming task so it's better to avoid it. Instead of creating the same element over and over again try to cache it by assigning it to a JS variable. Next time you'll be using this element, DOM traversing will be omitted.

  6. Use method chaining

    • Most of jQuery methods return a jQuery objects. It means that immediately after one method you can call another method on the object returned by the first method. Sounds complicated? Please look at example:

      $('div').find('span')
          .addClass('hidden')
          .fadeOut();

    • It's clearer way of writing code and it's got a better performance.

  7. For mass event creating use delegate() method

    • It have advantages over bind() and live() methods. The bind() method doesn't support elements created after the bind() method was called. For this type of situations you have to use the live() or the delegate() method. The live() is a simple implementation of delegation used in vanilla JavaScript (you can read about it here: Event delegation). It's a great concept helping to avoid cloning event handlers. So why not the live()? It's slower and it don't allow for chaining.

  8. Watch out for adding elements to DOM

    • Don't append new elements if you are looking for a place to store data. Use a data() method instead.

    • When you're append an element try to do it on a cached element. Beside that do it once with prepared string. Look at this performance test: http://jsperf.com/string-concat-single-append-vs-multiple-append

    • Try to use detach() method.

    • Use data() method in these way:

      $.data('#elem', key, value)
      rather then this way:
      $('#elem').data(key, value)
      .

  9. Use native loop rather than $.each()

  10. Avoid creating unnecessary objects

    • This way:

      $.text($elem)
      is much better than this way:
      $elem.text();

  11. DRY that is Don't Repeat Yourself

    • More repeated code means greater size, greater mess and more problems with maintenance. Looks quite obvious.