Js Saturday 2013 your jQuery could perform better

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

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

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 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 Selectors
http://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-sizzling
Rather 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 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

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:

Js Saturday 2013 your jQuery could perform better

Recommended

More Related Content

What's hot (20)

Similar to Js Saturday 2013 your jQuery could perform better (20)

More from Ivo Andreev (20)

Recently uploaded (20)

Js Saturday 2013 your jQuery could perform better