Js Saturday 2013 your jQuery could perform better


Published on

Doing it, then doing right and finally improving. Have you ever had the feeling that your jQuery could run faster? And isn’t that the natural evolution of a developer? From new browser features and well known techniques to script breakup, sizzling, chaining and selector comparison... Tuning of any technology requires deep understanding of its core principles. In order not to just guess we need to learn how browsers execute JavaScript and how jQuery is built. If these issues have been bothering you recently – join us to see how or share your experience.

Published in: Software, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Js Saturday 2013 your jQuery could perform better

  1. 1. Your jQuery could perform betterFrom jQuery-ing to jQuery-ing Better
  2. 2. About me Project Manager @ 10+ years professional experience Microsoft Certified Specialist Business Interests ASP.NET, AJAX, jQuery SOA, Integration GIS, Mapping SQL optimization
  3. 3. The JavaScript Nature Script runs in a single thread (UI thread) Shared between JS execution and UI updateRender Render Render <script/> Download Parse ExecuteStarted Waits Continued Parallel Download is NOT Async Execution Modern BrowsersOld Browsers Stop operation Parallel download Download & Execute Execute in order Download next Only one at a time
  4. 4. Blocking Scripts Page cannot render until: Script is 100% downloaded (longest & variable) Parsed (script dependencies) Executed No UI updates while JavaScript is running Long running JS = Unresponsive UI
  5. 5. How long is “Too Long”? Performance is critical to success Page ranking depends on page speed +100ms page load = 1% less Sales +2 sec page load = 4% less ad clicks Usability 0.1 sec Feel the system is reacting instantaneously 1.0 sec User flow of thought to stay uninterrupted 10 sec The limit for keeping the users attention http://www.nngroup.com/articles/response-times-3-important-limits/
  6. 6. Non-blocking Scripts Dynamic script loading Dynamic script is non-blocking Downloaded in parallel Execution in the single UI thread document.createElement("script") Problem? Order of script inclusion Preserved (Firefox and Opera) Not presereved (IE, Safari and Chrome)
  7. 7. Non-blocking Scripts Deferred loading <script defer src=“script.js“/> Begin download immediately Execute after UI rendered DOMContentLoaded event Multiple <script defer> order not guaranteed HTML5 async attribute <script async src=“script.js“/> Supported in IE10 Download begins immediately Execution slotted at first available time (incl. before render) Multiple <script async> order not guaranteed
  8. 8. Script BreakupBreakup long-running scriptsExecute as soon as UI thread is idle setTimeout(), setInterval() Script yielding Example var immediateID = setImmediate(function(){…},[params]); clearImmediate(immediateID) IE (10) Firefox (19) Chrome (26) Safari (6) Opera (12) 10+ N/A N/A N/A N/A
  9. 9. JavaScript Concurrency HTML5 WebWorkers def: separate JS file loaded and executed in the background on a separate thread. Limitations No document No page script access Data is serialized in/out of worker Limited R/O access to most window propertiesIE (10) Firefox (19) Chrome (26) Safari (6) Opera (12)10+ 3.5+ 4.0+ 4.0+ 10.6+
  10. 10. DEMO 1 Web Workers
  11. 11. A Slide not to Skip Fast and light Document traversal/manipulation Event-handling, animation Simplified AJAX Cross-Browser Widespread Stable; Tested; Documented; Plugins IBM, Google (CDN host), Microsoft (contribute) Surprisingly All selectors are not created equal
  12. 12. jQuery Selectors Selectors are not the same Selectors don’t have equal performance Main typesType Example Native SupportID $("#id") getElementById()Element $("p"), $("input") getElementsByTagname()Class $(".class") getElementsByClassName()Attribute $("[attribute=value]") querySelectorAll()Pseudo-Attribute $(‘:visible, :hidden’) querySelectorAll()
  13. 13. jsPerf.com Create test cases Share test cases Ops/Sec Number of executions per second Tests repeated to minimize uncertainty Higher is better Compare different browser performance
  14. 14. DEMO 2 ID vs. Element vs. Attribute Selectorshttp://jsperf.com/jssatbg-jquery-selector-comparison/2
  15. 15. Sizzling Sizzle Open source selector library From jQuery 1.3 and on Right-to-Left parse model Make right-most selector specific querySelectorAll() in modern browsers http://jsperf.com/jssatbg-jquery-sizzlingRather Than$(.class span.class2) $(div.class .class2)
  16. 16. Parent-Child Relations $parent.find(‘child’) //find Parent selector cached from DOM $(‘.child’, $parent) //context Translated to above (- 5%) $parent.children(‘.child’) //immediate children Uses $.sibling( elem.firstChild ) (-50%) $(‘#parent > .child’) //child combinator match child before checking direct parent (-70%) $(‘#parent .child’) //class selector Uses a class selector, translates to .find() (-75%)
  17. 17. DEMO 3 Class vs. Context vs. Find()http://jsperf.com/jssatbg-jquery-selectors/3
  18. 18. Use jQuery When Necessary jQuery is JavaScript Sometimes JavaScript is better Loops native for faster than $.each() $(this).attr(id) Parses selector Create jQuery object Call document.getElementById() 90% slower
  19. 19. DEMO 4 Element Attribute vs. jQuery Attributehttp://jsperf.com/jssatbg-jquery-attributes
  20. 20. CACHING and CHAINing Each $(‘.elem’) reruns searches returns a new collection 60% slower Store result and reuse var children1 = $(‘.parents’).find(‘.child’), //bad var parents = $(‘.parents’), //caching var children2 = parents.find(‘.child’); //good Chains Most jQuery methods support chaining Chaining is the fastest followed by cached calls
  21. 21. Events Events Cost memory Attaching events $(selector).bind(); // jQuery 1.0 $(selector).live(); // jQuery 1.3 – 1.9 $(selector).delegate(); // jQuery 1.4.3+ $(selector).on(); // jQuery 1.7+ Example Table 8x8 Typically: 64 event listeners $(table).on(click,td, function() {…});
  22. 22. DOM Manipulation In-memory vs. On-screen Browser redraw is costly Insertion Minimize .append(), .insertBefore(), .insertAfter() Build HTML strings in-memory Use single .append() .detach() On heavy interaction with a node Re-insert the node to the DOM once you’re ready Up to 60% faster
  23. 23. Other jQuery Tips Most important Structure Maintainability Stay up to date Regression test Know selector performance Use HTML 5 more tags: <section/>, <header/>, <footer/> less items with given tag name better selector performance
  24. 24. Web Tools
  25. 25. Useful Links YUI Compressor http://yuicompressor.codeplex.com/ Browser feature support http://caniuse.com/ Nielsen-Norman Group Usability Articles http://www.nngroup.com/articles Paul Irish, jQuery Team member http://paulirish.com/ Addy Osmani, Google Engineer and jQuery Team http://addyosmani.com/blog/ John Resig, jQuery Lib Creator http://ejohn.org/blog/dom-documentfragments
  26. 26. Expect very soon: SharePoint Saturday! Saturday, June 8, 2013 Same familiar format – 1 day filled with sessions focused on SharePoint technologies Best SharePoint professionals in the region Registrations will be open next week (15th)! www.SharePointSaturday.eu
  27. 27. Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners: