This presentation gives you tips and tricks on how to improve your jQuery code for better performance, readibility and maintainability.

1. jQuery Doing it right Girish Gangadharan @appoosa girish@giri.sh http://giri.sh

3. Chrome Developer Tools

4. IE Web Developer Toolbar

6. Only 4KB minified and gzipped

8. Use tag names in selectors

9. Be more specific on the right side query

11. Cache is awesome Use it as often and as much as you can Limited DOM traversal = Better performance var $h2s = $('#container h2'); $h2s.css('border', '1px solid #666666'); $h2s.click( function() { $(this).next('div').slideToggle(); });

12. 'Context' is fast. 'Find' is faster. Try not to involve the Sizzle engine if you can $('child', $('#parent')); (internally calls) $('#parent').find('child');

13. Chaining Less code. Better readability. $('p#elementId') .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');

14. Bind() Vs Live() Vs Delegate() Understand what each does. Use appropriately. $('#sometable').each(function(){ $('td', this).bind('hover', function(){ $(this).toggleClass('hover'); }); }); $('#sometable').each(function(){ $('td', this).live('hover', function(){ $(this).toggleClass('hover'); }); }); $('#sometable').delegate('td', 'hover', function(){ $(this).toggleClass('hover'); });

15. Native calls Vs jQuery Native calls are always faster even if a tad bit For example, $(this).attr('id'); // Fast this.id; // Faster

16. Limit DOM manipulation Create what you need in memory. Then update the DOM. BAD var $mylist = $('#mylist'); // <ul> for (vari = 0; i < 100; i++) { $mylist.append('<li>' + bestsellers[i] + '</li>'); } GOOD var $mylist = $('#mylist'); // <ul> varconcatenatedList = “”; for (vari = 0; i < 100; i++) { concatenatedList += ('<li>' + bestsellers[i] + '</li>'); } $mylist.append(concatenatedList);

17. Event delegation Bind fewer events to the elements for better performance. BAD $('#myListli).bind('click', function() { // do stuff }); GOOD $('#myList).bind('click', function(e){ var target = e.target; if (target.nodeName === 'LI') { // do stuff } });

19. Use data() to store state

20. Take advantage of CDNs

22. Revealing Module Pattern

23. Constructional Pattern

24. Creational Pattern

25. Factory Pattern

26. etc.Fantastic book on JS patterns: http://addyosmani.com/blog/essentialjsdesignpatternsupdate1

27. Let’s play with Firebug a little.

28. Questions?

29. jQuery Doing it right. Thank you. Girish Gangadharan @appoosa girish@giri.sh http://giri.sh