Front-end optimisation & jQuery Internals (Pycon)

jQuery internals and frontend optimisation Artur Cistov – PyCon Ireland 2010

Why bother? 500ms slower = 20% drop in traffic (Google) 400ms slower = 59% drop in fullpage 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  Frontend optimisation  jQuery under the hood  jQuery optimisation  Tools & Resources

Frontend Optimisation 1. Dependency loading 2. Initial Rendering 3. Postload 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 26 simultaneous request limit per domain name.  Subdomains are treated as different domains in this context

Maximising parallel downloads  LABjs “allpurpose, ondemand 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/

Nonblocking 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. Postload responsiveness

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

Postload responsiveness techniques  Minimising Reflows & Repaints  JavaScript 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 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. Source http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow

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 Batch DOM changes and/or perform them off the DOM:  Detaching element from the DOM, making changes & reinserting  Hide element before changes, apply them & show again  innerHTML  DOMDocumentFragment

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

Frontend Optimisation Recap: 1. Dependency loading (HTTP requests, filesize, parallel downloads, blocking) 2. Rendering (Asset order, Lazy loading, Flash of unstyled content) 3. Postload responsiveness (Reflows & repaints, JavaScript optimisations)

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/BarebonesjQuery http://www.flickr.com/photos/voss/71431079/

Sample Usage

Full Source:

1. Initialisation

2. jQuery.prototype

3. Utility methods

4. Aliases

5. Sample Plugins

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 viewer http://james.padolsey.com/jquery

jQuery: what's coming  Ajax module rewrite  Dependency & load management  Templating  Data binding  Mobile support

jQuery Dublin http://meetups.jquery.com/group/jquerydublin

Tools & Resources

Google Closure Compiler

Google Closure Compiler  Opensource, written in Java & easy to extend  Three modes  Up to 6070% 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 browsers  jQuery gained 13% minification improvement by switiching to Google Compiler from YUI compressor

dynaTrace AJAX Edition http://ajax.dynatrace.com/

Cuzillion Opensource web performance exploration tool

Books v

Links Yahoo Exceptional performance team ttp://developer.yahoo.com/performance/ Nokia JavaScript Performance Best Practices http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices Google Performance resources http://code.google.com/speed/ Steve Souders, ex Chief Performance Yahoo http://stevesouders.com/

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

Front-end optimisation & jQuery Internals (Pycon)

by Artur Cistov on Jul 15, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 5

Statistics

Front-end optimisation & jQuery Internals (Pycon) — Presentation Transcript