Js Saturday 2013 your jQuery could perform better
Upcoming SlideShare
Loading in...5
×
 

Js Saturday 2013 your jQuery could perform better

on

  • 988 views

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 ...

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.

Statistics

Views

Total Views
988
Views on SlideShare
988
Embed Views
0

Actions

Likes
1
Downloads
25
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Js Saturday 2013 your jQuery could perform better Js Saturday 2013 your jQuery could perform better Presentation Transcript

  • Your jQuery could perform betterFrom jQuery-ing to jQuery-ing Better
  • About me Project Manager @ 10+ years professional experience Microsoft Certified Specialist Business Interests ASP.NET, AJAX, jQuery SOA, Integration GIS, Mapping SQL optimization
  • 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
  • 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
  • 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/
  • 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)
  • 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
  • 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
  • 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+
  • DEMO 1 Web Workers
  • 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
  • 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()
  • 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
  • DEMO 2 ID vs. Element vs. Attribute Selectorshttp://jsperf.com/jssatbg-jquery-selector-comparison/2
  • 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)
  • 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%)
  • DEMO 3 Class vs. Context vs. Find()http://jsperf.com/jssatbg-jquery-selectors/3
  • 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
  • DEMO 4 Element Attribute vs. jQuery Attributehttp://jsperf.com/jssatbg-jquery-attributes
  • 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
  • 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() {…});
  • 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
  • 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
  • Web Tools
  • 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
  • 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
  • Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners: