Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

jQuery - Doing it right

2,436 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

jQuery - Doing it right

  1. 1. jQuery<br />Doing it right<br />Girish Gangadharan<br />@appoosa<br />girish@giri.sh<br />http://giri.sh<br />
  2. 2. Tools for the trade<br />Proper tools = Enhanced productivity + Makes work fun<br /><ul><li> Firebug is your best friend (Can’t believe it’s free!)
  3. 3. Chrome Developer Tools
  4. 4. IE Web Developer Toolbar
  5. 5. Fiddler</li></li></ul><li>Sizzle<br />Selector engine used by jQuery created by John Resig.<br />Now spun off to its own project – http://SizzleJS.com <br /><ul><li> Completely standalone (no library dependencies)
  6. 6. Only 4KB minified and gzipped
  7. 7. Highly extensible with easy-to-use API</li></li></ul><li>Writing better selectors<br />Speed up performance with better queries<br /><ul><li> ID selector is the fastest
  8. 8. Use tag names in selectors
  9. 9. Be more specific on the right side query
  10. 10. Don’t overdo the selectors</li></li></ul><li>Is the DOM ready?<br />Well, should you wait?<br />Not everything needs to be done in $(document).ready().<br /> $(document).ready(function () { <br /> //Do stuff here that can be done only after the DOM is loaded<br /> });<br /> $('#container a').click(function () {<br /> //Do other stuff here <br />});<br />
  11. 11. Cache is awesome<br />Use it as often and as much as you can<br />Limited DOM traversal = Better performance<br />var $h2s = $('#container h2');<br /> $h2s.css('border', '1px solid #666666');<br /> $h2s.click( function() {<br /> $(this).next('div').slideToggle();<br /> });<br />
  12. 12. 'Context' is fast. 'Find' is faster.<br />Try not to involve the Sizzle engine if you can <br /> $('child', $('#parent')); <br /> (internally calls)<br /> $('#parent').find('child');<br />
  13. 13. Chaining<br />Less code. Better readability.<br />$('p#elementId')<br />.css('border', '3px dashed yellow')<br />.css('background-color', 'orange')<br />.fadeIn('slow');<br />
  14. 14. Bind() Vs Live() Vs Delegate()<br />Understand what each does. Use appropriately.<br />$('#sometable').each(function(){<br /> $('td', this).bind('hover', function(){<br /> $(this).toggleClass('hover');<br /> });<br /> });<br />$('#sometable').each(function(){<br /> $('td', this).live('hover', function(){<br /> $(this).toggleClass('hover');<br /> });<br /> });<br />$('#sometable').delegate('td', 'hover', function(){<br /> $(this).toggleClass('hover');<br />});<br />
  15. 15. Native calls Vs jQuery<br />Native calls are always faster even if a tad bit<br />For example,<br />$(this).attr('id'); // Fast<br />this.id; // Faster<br />
  16. 16. Limit DOM manipulation<br />Create what you need in memory. Then update the DOM. <br />BAD<br />var $mylist = $('#mylist'); // <ul> <br />for (vari = 0; i < 100; i++) {<br /> $mylist.append('<li>' + bestsellers[i] + '</li>');<br /> }<br />GOOD<br />var $mylist = $('#mylist'); // <ul> <br />varconcatenatedList = “”;<br />for (vari = 0; i < 100; i++) {<br />concatenatedList += ('<li>' + bestsellers[i] + '</li>');<br /> }<br />$mylist.append(concatenatedList);<br />
  17. 17. Event delegation<br />Bind fewer events to the elements for better performance.<br />BAD<br />$('#myListli).bind('click', function() { <br />// do stuff <br />});<br />GOOD<br />$('#myList).bind('click', function(e){ <br />var target = e.target;<br />if (target.nodeName === 'LI') { <br />// do stuff<br />}<br /> });<br />
  18. 18. Some more little tips<br />Some of these are clever. But may not apply in all the cases.<br /><ul><li> Lazy loading content
  19. 19. Use data() to store state
  20. 20. Take advantage of CDNs
  21. 21. Compress your source files</li></li></ul><li>Wait a second…<br />How much performance improvement are you likely to see using these tips?<br />Probably not a lot, especially if you don’t have a complex multi-nested DOM<br />Always better to focus on the design & architecturerather.<br />For example, how to better structure your code.<br /><ul><li> Module Pattern
  22. 22. Revealing Module Pattern
  23. 23. Constructional Pattern
  24. 24. Creational Pattern
  25. 25. Factory Pattern
  26. 26. etc.</li></ul>Fantastic book on JS patterns: http://addyosmani.com/blog/essentialjsdesignpatternsupdate1<br />
  27. 27. Let’s play with Firebug a little.<br />
  28. 28. Questions?<br />
  29. 29. jQuery<br />Doing it right.<br />Thank you.<br />Girish Gangadharan<br />@appoosa<br />girish@giri.sh<br />http://giri.sh<br />

×