jQuery - Doing it right

Transcript

1. jQuery Doing it right. Girish Gangadharan @appoosa girish@giri.sh http://giri.sh
2. Sizzle Selector engine used by jQuery created by John Resig. Now spun off to its own project – http://SizzleJS.com • Completely standalone (no library dependencies) • Competitive performance for most frequently used selectors • Only 4KB minified and gzipped • Highly extensible with easy-to-use API
3. Writing better selectors Speed up performance with better queries • Be more specific on the right side query • ID selector rules everything • Use tag names in selectors • Don’t overdo the selectors
4. Is the DOM ready? Do you need to wait until it is? Not everything needs to be done in $(document).ready(). $(document).ready(function () { / / D o s t u f f h e r e t h a t c a n b e d o n e o n l y a f t e r t h e D O M i s l o a d e d }); $("a").click(function () { / / D o o t h e r s t u f f h e r e });
5. Cache is awesome Use it as often and as much as you can It helps limit the number of times the DOM needs to be traversed to fetch an element. And hence, significant performance improvement.
6. “Scope” is fast. “Find” is faster. Doesn’t involve the sizzle engine. $(‘#parent').find(‘child'); -- is the same as -- $(‘child', $(‘#parent'));
7. Chaining Less code. Better readability. $('p#elementId') .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');
8. Bind() Vs Live() Vs Delegate() Understand what each does. Use appropriately.
9. Native calls Vs jQuery Native calls are always faster even if a tad bit
10. Limit DOM manipulation Create what you need in memory. Then update the DOM.
11. Event delegation Bind fewer events to the elements for better performance. $('#myList li).bind('click', function() { // do stuff }); $('#myList).bind('click', function(e){ var target = e.target; if (target.nodeName === 'LI') { // do stuff } });
12. Eliminate Waste No matching elements still means jQuery has to look for them
13. Questions?
14. jQuery Doing it right. Girish Gangadharan @appoosa girish@giri.sh http://giri.sh