Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Digesting jQuery

400 visualizaciones

Publicado el

jQuery is so easy to write and therefore so easy to write poor code also. As coders are we sure that what we write can easily be digested by the web page? Lets go and see how we can easily improve performance with same code with different approach.

Publicado en: Software
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Digesting jQuery

  1. 1. Digesting jQuery... Presenter: Subhranil Dalal
  2. 2. Be Strong Enough
  3. 3. Go for Latest
  4. 4. All Modern Browser Older IE
  5. 5. CDN vs Local
  6. 6. CDN?? Why??
  7. 7. Choose your food smartly
  8. 8. Bad selection
  9. 9. Be Smart  Use an ID if possible, $('#element');  Use tag selector next. Its the second fastest selector. $('div')  Avoid selecting by class only. Class selectors are the slowest selector. $('.myClass').  Only use class selector with context name. $('div.myClass')  Increase specificity from Left to Right.  $('p#intro em') vs. $('em', $('p#intro'))
  10. 10. Find Me
  11. 11. $.find()  Use find() instead of specifying an explicit context.  The key is to stray away from forcing jQuery to use Sizzle engine.  $('#someDiv p.someClass').hide()  $('#someDiv').find('p.someClass').hide() http://jsfiddle.net/subhranild/y54Ljv14/ http://jsperf.com/subh-li-last
  12. 12. Cage Me
  13. 13. Cache the Selector http://jsfiddle.net/subhranild/rbmu4ah1/ http://jsperf.com/subh-cache-query
  14. 14. Chain Me
  15. 15. Take advantage of jQuery Chaining http://jsperf.com/subh-chaining
  16. 16. Group Me
  17. 17. Group up Selectors http://jsperf.com/subh-group-selector
  18. 18. DOM isn't Database
  19. 19. DOM insertion is costly
  20. 20. No iterative DOM manipulation http://jsperf.com/subh-select-dynamic-options/2
  21. 21. detach() is the game changer
  22. 22. Beware of .css() Iteration
  23. 23. Incorrect approach Correct approach http://jsperf.com/subh-css
  24. 24. Incorrect approach
  25. 25. Correct approach
  26. 26. Best approach http://jsperf.com/subh-css-vs-style-few http://jsperf.com/subh-css-vs-style
  27. 27. Event Delegation
  28. 28. http://jsfiddle.net/subhranild/sawn1rv4/ http://jsfiddle.net/subhranild/sawn1rv4/1/
  29. 29. Event Propagation Understanding how events propagate is an important factor in being able to leverage Event Delegation. Any time one of our anchor tags is clicked, a click event is fired for that anchor, and then bubbles up the DOM tree, triggering each of its parent click event handlers: ● <a> ● <li> ● <ul #list> ● <div #container> ● <body> ● <html> ● document root This means that anytime you click one of our bound anchor tags, you are effectively clicking the entire document body! This is called event bubbling or event propagation. http://jsfiddle.net/subhranild/1zcv45kf/ http://jsfiddle.net/subhranild/1zcv45kf/1/
  30. 30. bind() vs delegate() vs on()
  31. 31. bind() The .bind() method attaches the event handler directly to the DOM element in question ( "#members li a" ). The .click() method is just a shorthand way to write the .bind() method. $( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} ); ● For a simple ID selector, using .bind() not only wires-up quickly, but also when the event fires the event handler is invoked almost immediately. ● The method attaches the same event handler to every matched element in the selection. ● It doesn't work for elements added dynamically that matches the same selector. ● There are performance concerns when dealing with a large selection. ● The attachment is done upfront which can have performance issues on page load.
  32. 32. delegate() The .delegate method attaches the event handler to the root level document along with the associated selector and event information. By registering this information on the document it allows one event handler to be used for all events that have bubbled (a.k.a. delegated, propagated) up to it. Once an event has bubbled up to the document jQuery looks at the selector/event metadata to determine which handler it should invoke, if any. This extra work has some impact on performance at the point of user interaction, but the initial register process is fairly speedy. $( "#members" ).delegate( "li a", "click", function( e ) {} ); ● You have the option of choosing where to attach the selector/event information. ● The selection isn't actually performed up front, but is only used to register onto the root element. ● Chaining is supported correctly. ● Since this technique uses event delegation, it can work with dynamically added elements to the DOM where the selectors match.
  33. 33. on() That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it. $( "#members li a" ).on( "click", function( e ) {} ); $( document ).on( "click", "#members li a", function( e ) {} ); $( "#members" ).on( "click", "li a", function( e ) {} ); ● Using the .bind() method is very costly as it attaches the same event handler to every item matched in your selector. ● You should stop using the .live() method as it is deprecated and has a lot of problems with it. ● The .delegate() method gives a lot of "bang for your buck" when dealing with performance and reacting to dynamically added elements. ● That the new .on() method is mostly syntax sugar that can mimic .bind(), .live(), or .delegate() depending on how you call it. http://jsperf.com/subh-bind-delegate-on
  34. 34. Passing data to the handler Multiple Event Handlers
  35. 35. Cut the Wire
  36. 36. Abort AJAX https://jboyblogger.wordpress.com/2014/10/05/why-and-how-to-abort-an-ajax-call-in-jquery/
  37. 37. Go Parallel
  38. 38. Deferred AJAX https://jboyblogger.wordpress.com/2014/11/25/call-ajax-in-parallel-instead-of-in-a-chai
  39. 39. Beauty of Loading
  40. 40. .load() http://plnkr.co/edit/a6dPRHJKdYmiNuRThlOc?p=preview
  41. 41. Understanding Attribute and Property
  42. 42. attr() vs. prop() The difference between attributes and properties can be important in specific situations. Before jQuery 1.6, the .attr() method sometimes took property values into account when retrieving some attributes, which could cause inconsistent behavior. As of jQuery 1.6, the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes. Concerning boolean attributes, consider a DOM element defined by the HTML markup <input type="checkbox" checked="checked" />, and assume it is in a JavaScript variable named elem:
  43. 43. Hiding Face?? Not Good!!!
  44. 44. Go for data()
  45. 45. A bit of Closure
  46. 46. Be careful while attaching event in loop http://jsfiddle.net/subhranild/783dsfz2/ http://jsfiddle.net/subhranild/ywr5ka8u/
  47. 47. migrate vs noConflict
  48. 48. migrate They say there are no second acts in software … well, there are always second acts in software. Especially when the first act bombs. With that in mind, version 1.2.1 of the jQuery Migrate plugin has arrived. It can be used with either jQuery 1.9 or jQuery 2.0. <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> https://github.com/jquery/jquery-migrate#readme
  49. 49. noConflict Load two versions of jQuery . Then, restore jQuery's globally scoped variables to the first loaded jQuery. <script src="http://code.jquery.com/jquery-1.9.0.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> http://plnkr.co/edit/9FTT11dy7NSSMywbOzTy?p=preview

×