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.

1. Your jQuery could perform better
From jQuery-ing
to jQuery-ing Better

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. The JavaScript Nature
Script runs in a single thread (UI thread)
Shared between JS execution and UI update
Render Render Render
<script/> Download Parse Execute
Started Waits Continued
Parallel Download is NOT Async Execution
Modern Browsers
Old Browsers
Stop operation Parallel download
Download & Execute Execute in order
Download next Only one at a time

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. 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 attention
http://www.nngroup.com/articles/response-times-3-important-limits/

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

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 properties
IE (10) Firefox (19) Chrome (26) Safari (6) Opera (12)
10+ 3.5+ 4.0+ 4.0+ 10.6+

10. DEMO 1
Web Workers

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

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. DEMO 2
ID vs. Element vs. Attribute Selectors
http://jsperf.com/jssatbg-jquery-selector-comparison/2

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-sizzling
Rather Than
$('.class span.class2') $('div.class .class2')

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. DEMO 3
Class vs. Context vs. Find()
http://jsperf.com/jssatbg-jquery-selectors/3

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. DEMO 4
Element Attribute vs. jQuery Attribute
http://jsperf.com/jssatbg-jquery-attributes

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

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. 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. Thanks to our Sponsors:
Diamond Sponsor:
Platinum Sponsors:
Gold Sponsors:
Swag Sponsors:
Media Partners: