Upload
ivo-andreev
View
1.112
Download
0
Embed Size (px)
DESCRIPTION
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.
Citation preview
Your jQuery could perform better
From 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 update
Render Started
<script/>Render
WaitsDownload Parse Execute
Render Continued
� Stop operation
� Download & Execute
� Download next
� Parallel download
� Execute in order
� Only one at a time
� Parallel Download is NOT Async Execution
Old B
rowse
rs
Modern
Bro
wse
rs
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 user's attentionhttp://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 Breakup
Breakup long-running scripts
Execute 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 properties
IE (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
� Widespread
� Stable; Tested; Documented; Plugins
� IBM, Google (CDN host), Microsoft (contribute)
� Surprisingly� All selectors are not created equal
� Fast and light� Document traversal/manipulation� Event-handling, animation� Simplified AJAX� Cross-Browser
jQuery Selectors
� Selectors are not the same
� Selectors don’t have equal performance
� Main types
Type Example Native Support
ID $("#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 Attribute
http://jsperf.com/jssatbg-jquery-attributes
CACHING and CHAINing
� Each $(‘.elem’) � reruns searches
� returns a new collection
� 60% slower
� Store result and reusevar 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 Compressorhttp://yuicompressor.codeplex.com/
� Browser feature supporthttp://caniuse.com/
� Nielsen-Norman Group Usability Articleshttp://www.nngroup.com/articles
� Paul Irish, jQuery Team memberhttp://paulirish.com/
� Addy Osmani, Google Engineer and jQuery Teamhttp://addyosmani.com/blog/
� John Resig, jQuery Lib Creatorhttp://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: