jQuery internals and front­end optimisation

Artur Cistov – PyCon Ireland 2010

Why bother?

500ms slower = 20% drop in traffic (Google)400ms slower = 5­9% drop in full­page traffic (Yahoo)100ms slower = 1% drop in sales (Amazon)

Source: http://www.slideshare.net/stoyan/yslow-20-presentation

Why bother?

Google added site speed as a factor to search ranking on April 9, 2010

Why bother?

 Less CPU power and memory than    on the desktop Slower connections 25Kb cache limit per file on iPhone

Source: http://yuiblog.com/blog/2008/02/06/iphone-cacheability/

280slides.com

Quake II GWT Port

Source: http://www.youtube.com/watch?v=XhMN0wlITLk

Plan for this talk

Front­end optimisation jQuery under the hood jQuery optimisation Tools & Resources

Front­end Optimisation

1. Dependency loading2. Initial Rendering3. Post­load responsiveness

1. Dependency Loading

Total time needed to download all the page assets (images, stylesheets, scripts etc.)

Ideally, full download only happens once, later on assets are taken from cache

Full vs. Empty Cache

Dependency Loading Optimisation Techniques

Minimising HTTP Requests Minimising total filesize Maximising parallel downloads Addressing blocking behaviour

developer.yahoo.com/performance/

Minimising HTTP Requests

Combining multiple JS & CSS files, combining images into sprites

Avoiding requests alltogether with caching (Expires & ETag headers)

Image Sprite Examples

Filesize

Gzipping Minifying scripts & styles Compressing images

Maximising parallel downloads

Browsers have 2­6 simultaneous request limit per domain name. 

Subdomains are treated as different domains in this context

Maximising parallel downloads

LABjs ­ “all­purpose, on­demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time.”

Allows to load scripts in parallel http://labjs.com/

Statically loading scripts (blocking)

Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/

Dynamically loading scripts

Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/

Non­blocking loading: Google Analytics

2. Speeding Up Initial Page Rendering

Speeding up onload render ­ techniques

Assets order .js class trick Lazy Loading Banners & tracking scripts Flash of Unscripted Content

Assets Order

CSS at the top, JavaScript at the bottom Avoid @import for CSS

Lazy Loading Deferring loading of a component after 

page load Module loader coming in jQuery 1.5? Facebook Primer library

.js class trick

Performance of 3rd Party Content

Source: http://www.stevesouders.com/p3pc/

3rd Party Content

9 additional HTTP requests for Digg Widget, 107 kB total download size, 665 ms median load time

Flash of unscripted content problem

Elements are rendered, but their behaviour hasn't been assigned yet

Traditional Solution:Script immediately after element

One of the modern solutions:Google Analytics Approach

3. Post­load responsiveness

Source: http://ejohn.org/blog/javascript-performance-stack/

Many factors

Post­load responsiveness techniques

Minimising Reflows & RepaintsJavaScript Optimisation

Repaints

Occur when something made visible or hidden without altering the layout. 

E.g. outline added to an element, background color or visibility changed

Repainting is expensive.

Reflows

Reflow occurs when the DOM is manipulated in a way it affects the layout. E.g. style is changed to affect the layout, className property is changed or browser window is resized. 

Reflows are even more expensive than repainting.

Reflows

Source http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow

Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.

Reflows are triggered by

Style is changed that affects the layout className property of an element is changed DOM modifications (e.g. adding new 

elements) using offsetWidth / offsetHeight / 

getComputedStyle

Minimising reflows Batch style updates

Source http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Minimising reflows

Detaching element from the DOM, making changes & reinserting 

Hide element before changes, apply them & show again

innerHTML DOMDocumentFragment

Batch DOM changes and/or perform them off the DOM:

Minimising reflows

Source http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices#Use_createDocumentFragment.28.29

Minimising reflows

Apply animations with position fixed or absolute

Underlying Problem of Single Thread

UI rendering & JavaScript share the same thread of execution

Long­running scripts can freeze UI or cause 'Do you want to stop this script' prompts

Web Workers API

 Draft Recommendation — 12 May 2010  Background workers running scripts in   

parallel to the main page Message passing

Some JavaScript Optimisations

Variable lookup performance Avoiding eval Caching array length in loops Using try/catch sparingly

Front­end Optimisation Recap:

1. Dependency loading (HTTP requests, filesize, parallel downloads, blocking)

2. Rendering (Asset order, Lazy loading, Flash of unstyled content)

3. Post­load responsiveness (Reflows & repaints, JavaScript optimisations)

jQuery Usage

Source:http://trends.builtwith.com/javascript/JQuery

jQuery Usage

Source:http://trends.builtwith.com/javascript/JQuery

jQuery Performance

Source: http://www.flickr.com/photos/jeresig/4366089661/

jQuery Productivity

Source: http://www.slideshare.net/paul.irish/perfcompression

Barebones jQuery 0.1

http://github.com/cistov/Barebones­jQuery

http://www.flickr.com/photos/voss/71431079/

Sample Usage

Full Source:

1. Initialisation

2. jQuery.prototype

3. Utility methods

4. Aliases

5. Sample Plug­ins

jQuery Instance (Matched/Wrapped Set)

Two fundamental pieces of functionality in jQuery

jQuery instance methods e.g. $('#nav a').show(); utility ('static') methods$.noConflict();

jQuery optimisation

Use the latest version

Sizzle selector engine

 Introduced in jQuery 1.3  http://sizzlejs.com/  Unlike earlier versions of 

jQuery, it parses selectors from right to left

 This is how browsers parse CSS too

Specific on the right & generic on the left

Chain or cache selections

Don't act on empty sets

Class selectors

jQuery.fn.find

Events

Memory Leaks

Source: http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx

Memory Leaks

Avoid attaching objects to DOM nodes directly Use jQuery methods instead:

jQuery source viewerhttp://james.padolsey.com/jquery

jQuery: what's coming

Ajax module rewrite Dependency & load management Templating Data binding Mobile support

jQuery Dublinhttp://meetups.jquery.com/group/jquerydublin

Tools & Resources

Google Closure Compiler

Google Closure Compiler Open­source, written in Java & easy to extend Three modes  Up to 60­70% filesize savings Advanced code transforms based on syntax tree including constant & function inlining, dead code removal etc. Highlights code patterns that may not work well on all browsersjQuery gained 13% minification improvement by switiching to Google Compiler from YUI compressor

dynaTrace AJAX Editionhttp://ajax.dynatrace.com/

CuzillionOpen­source web performance exploration tool 

v

Books

Links

Yahoo Exceptional performance teamttp://developer.yahoo.com/performance/

Nokia JavaScript Performance Best Practiceshttp://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices

Google Performance resourceshttp://code.google.com/speed/

Steve Souders, ex Chief Performance Yahoohttp://stevesouders.com/

Thanks

http://slideshare.net/cistovhttp://twitter.com/cistovhttp://github.com/cistov