Awesome jQuery performance tips by Addy Osmani.

I’m always on the look out for ways to improve my front end development skills. I usually have to sift through heavily opinionated articles to find anything useful. Addy Osmani recently posted up a slide show with some really great performance tips. He has a bunch of great articles and I’ve learned a lot from them. You can check out the slides here. I’d highly highly encourage you to go through all the slides a couple times. Here are a couple of things that I took away that I now use all the time.

  1. Always use the latest version of jQuery
    • Newer versions of jQuery have significant performance improvements.
    • I’ve usually only thought to upgrade to get new features.
  2. Use ID and tag selectors whenever you can.
    • getElementById and getElementByTagName are native javascript. The further you get away from native javascript, the slower it will perform.
    • I steered away from using IDs and only used class selectors for a long time. I plan on fixing that.
  3. Understand parent and children selectors.
    • I use to use $(‘.blah’, ‘.wrapper’) all the time. I now know that this is a much better option:
      var list = document.getElementById('list');
      var $test = $(list).find('.test');
      

      Here is where you can check out the performance of this.

  4. Use raw javascript
    • Ever do this?
      $('a').click(function(){
           var url = $(this).attr('href');
      });
      

      This is much faster

      $('a').click(function(){
           var url = this.href;
      });
      
    • Check out a performance test here to see that using raw javascript is significantly faster that using jQuery for attributes.
  5. Event delegation
    • Another item where I’ve done what’s easier to code than what is better for performance.
      $('#nav a').live('click', function(e) {
       e.preventDefault();
      });
      

      is slower than

      $('#nav').delegate('a', 'click', function(e) {
       e.preventDefault();
      });
      

      They both do the same thing.

I’m a Technology Architect for Rockfish Digital. I’ve been there since 2007. I love coding and spend most of my time in C# and JavaScript. I’m a firm believer in the Full Stack Developer.

Author: worthyd

I'm a Technology Architect for Rockfish Digital. I've been there since 2007. I love coding and spend most of my time in C# and JavaScript. I'm a firm believer in the Full Stack Developer.

Leave a Reply

Your email address will not be published. Required fields are marked *