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: