permalink

39

jQuery Performance Tips And Tricks – A Free 30 Minute Talk

 

Hey guys. Today we’re going to take a look at best practices, tips and tricks for improving the performance of your jQuery code. Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bare in mind.

The reason for this is that depending on how you approach writing your code or addressing the behavior you’re after, you may not be getting all of the ‘instant’ or ‘easy’ perf wins that following best practices have to offer. To help, I recorded you a free 30 minute talk on this topic and you can now watch it online, stream or download it in a format of your choice below.

 

 

 

I wanted to record this talk because I felt that there will still a number of both obvious (and occasionally less-well understood) concepts which intermediate jQuery developers could benefit with having explained or highlighted.

We see a lot of online performance guides that encourage you to use ‘selector X over Y’, but not too many explain the reasoning behind this or go into more detail – hopefully this talk will assist in taking your knowledge of some of the more optimal ways of coding in jQuery just that little bit further : )

If you find the talk useful please feel free to share it with your friends or colleagues by clicking on the ‘reweet’ button at the bottom of the post. I hope it helps!.

PS: If there are additional performance best practices or tips not mentioned which you feel would be of benefit to share with the rest of the community, please don’t hesitate to leave a comment below.

Thanks to @dabheberden for his technical review of the talk and the folks over at @internetarchive for hosting the extra video streams. I would also like to thank Matt Baker for his excellent performance post which provided great reference for some of the slides in the presentation.

Update: Some readers have been asking about a text version of the presentation to be made available. If you’re looking for text tips I recommend checking out Matt’s great article as some of the tips are mentioned there quite well but I’ll be working on getting out a text version of some of the rest of the tips in the next few days.

39 Comments

  1. Thanks a lot Addy for the insights and i've realized the simple mistakes which i do quite often using jQuery. Well documented and completely useful. Keep doing the good work .

  2. I have a Question to the $.data part:
    is a Cached jQuery Object also slower?
    cachedElem.data(key, value);
    $.data(cachedElem, key, value);

    • It really depends Alex. If you're talking about the initial cachedElem.data(key, value) its going to still be a little slower using x.data(k,v) than $.data(k,v) simply because the latter is a low-level method and the former isn't. That said, if whatever collection/element cachedElem represents is being used a few times in your code, caching that (ie) cachedElem.data(k,v) is always going to be more efficient than $('.element').data(k,v) being called multiple times because you're not making the DOM go fetch it again.

    • Hey Alex. A cached jQuery object using x.data(key,value) would still be slower than $.data(x, key,value) as the latter is low-level and the former isn't. You would get a little more of a perf gain from caching (if the selector was otherwise being queried for multiple times) but $.data() is definitely more efficient to use.

  3. I think ive found a gotcha, i was attempting to improve my code when i found this issue:

    imaging you have a nested markup situation: OL.categories LI OL LI…

    Try the following:

    var el = $('.somediv');
    el.children('.categories > li').each(function(){
    … then try …
    $('.categories > li', el).each(function(){

    Notice the first instance does not even return a single element. WHY?

    • Hmm. If you could reproduce what you're trying to achieve on jsFiddle.net I can try taking a look to see whats going on. I don't completely follow why you're iterating over $('.categories > li', el) inside of the first loop but I may have misunderstood what you're trying to do :) Feel free to reply back with a link and we'll take it from there.

  4. Pingback: Underbelly » jQuery performance tips and tricks 2011

  5. In regards to chained selectors:

    Another reason you should nest your chained methods is because multi-line version control and file diff is considerably easier than single-line. I can't remember where I read that, but it's the greatest thing I learned this week!

  6. Pingback: Excellent jQuery Performance tips video | randomcopypaste.com

  7. Quick question about .detach(): suppose I have a div on the page to which I will be appending multiple jquery objects in a loop. Do I detach the container, do the loop and append, then re-attach? How do I re-attach?

  8. Pingback: Twitter, jQuery, and Performance « Mike Vallotton's Blog

  9. Pingback: Cheatsheet: 2011 01.19 ~ 01.23 - gOODiDEA.NET

  10. Pingback: Tips and Tricks to Improving jQuery performance | webtrendset

  11. This was a great talk!
    At times I wish you would have gone into more detail about certain things but maybe I should do a follow up and go into more depth in places I thought you could have.

    Thanks for your contributions to the jQuery community!

  12. Pingback: Feb 2nd Links: Visual Studio, ASP.NET, ASP.NET MVC, JQuery, Windows Phone « Naimish Pandya [MCTS, MCPD]

  13. Pingback: Enlaces de Febrero: Visual Studio, ASP.NET, ASP.NET MVC, JQuery, Windows Phone « Thinking in .NET

  14. Loading jQuery from Google will, every now and then, cause a multiple-second delay in page loading. Ignore the possibility to save yourself a paltry 16k per visitor at your own risk… :)

  15. Pingback: jQuery Performance tips & tricks | iSellaDesigns

  16. Pingback: Resources and links – 4 March 2011

  17. Pingback: Feb 2nd Links: Visual Studio, ASP.NET, ASP.NET MVC, JQuery, Windows Phone « Cymes Blog

  18. I retweeted your post as you ask to :) and also liked on facebook as you suggested.
    Is really hard to find quality JQuery tutorial videos, I am glad I found your site, I have learnt a lot with your video, bookmarked!

  19. Wow, this was awesome. I’m just learning jquery right now and going through a book to help speed up the process. I noticed in Chrome that some of jQuery was running slow so I set out to find out why. This presentation gave me a ton of good ideas on how to fix it!

    Thanks.

Leave a Reply

Required fields are marked *.