Front-end optimisation & jQuery Internals (Pycon)

of 93 /93
jQuery internals and front-end optimisation Artur Cistov – PyCon Ireland 2010

Embed Size (px)

Transcript of Front-end optimisation & jQuery Internals (Pycon)

Page 1: Front-end optimisation & jQuery Internals (Pycon)

jQuery internals and front­end optimisation

Artur Cistov – PyCon Ireland 2010

Page 2: Front-end optimisation & jQuery Internals (Pycon)

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

Page 3: Front-end optimisation & jQuery Internals (Pycon)

Why bother?

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

Page 4: Front-end optimisation & jQuery Internals (Pycon)

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/

Page 5: Front-end optimisation & jQuery Internals (Pycon)

280slides.com

Page 6: Front-end optimisation & jQuery Internals (Pycon)

Quake II GWT Port

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

Page 7: Front-end optimisation & jQuery Internals (Pycon)
Page 8: Front-end optimisation & jQuery Internals (Pycon)
Page 9: Front-end optimisation & jQuery Internals (Pycon)

Plan for this talk

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

Page 10: Front-end optimisation & jQuery Internals (Pycon)
Page 11: Front-end optimisation & jQuery Internals (Pycon)
Page 12: Front-end optimisation & jQuery Internals (Pycon)

Front­end Optimisation

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

Page 13: Front-end optimisation & jQuery Internals (Pycon)

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

Page 14: Front-end optimisation & jQuery Internals (Pycon)

Full vs. Empty Cache

Page 15: Front-end optimisation & jQuery Internals (Pycon)

Dependency Loading Optimisation Techniques

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

Page 16: Front-end optimisation & jQuery Internals (Pycon)

developer.yahoo.com/performance/

Page 17: Front-end optimisation & jQuery Internals (Pycon)

Minimising HTTP Requests

Combining multiple JS & CSS files, combining images into sprites

Avoiding requests alltogether with caching (Expires & ETag headers)

Page 18: Front-end optimisation & jQuery Internals (Pycon)

Image Sprite Examples

Page 19: Front-end optimisation & jQuery Internals (Pycon)

Filesize

Gzipping Minifying scripts & styles Compressing images

Page 20: Front-end optimisation & jQuery Internals (Pycon)

Maximising parallel downloads

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

Subdomains are treated as different domains in this context

Page 21: Front-end optimisation & jQuery Internals (Pycon)

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/

Page 22: Front-end optimisation & jQuery Internals (Pycon)

Statically loading scripts (blocking)

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

Page 23: Front-end optimisation & jQuery Internals (Pycon)

Dynamically loading scripts

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

Page 24: Front-end optimisation & jQuery Internals (Pycon)
Page 25: Front-end optimisation & jQuery Internals (Pycon)
Page 26: Front-end optimisation & jQuery Internals (Pycon)

Non­blocking loading: Google Analytics

Page 27: Front-end optimisation & jQuery Internals (Pycon)

2. Speeding Up Initial Page Rendering

Page 28: Front-end optimisation & jQuery Internals (Pycon)

Speeding up onload render ­ techniques

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

Page 29: Front-end optimisation & jQuery Internals (Pycon)

Assets Order

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

Page 30: Front-end optimisation & jQuery Internals (Pycon)

Lazy Loading Deferring loading of a component after 

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

Page 31: Front-end optimisation & jQuery Internals (Pycon)

.js class trick

Page 32: Front-end optimisation & jQuery Internals (Pycon)

Performance of 3rd Party Content

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

Page 33: Front-end optimisation & jQuery Internals (Pycon)

3rd Party Content

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

Page 34: Front-end optimisation & jQuery Internals (Pycon)

Flash of unscripted content problem

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

Page 35: Front-end optimisation & jQuery Internals (Pycon)
Page 36: Front-end optimisation & jQuery Internals (Pycon)

Traditional Solution:Script immediately after element

Page 37: Front-end optimisation & jQuery Internals (Pycon)

One of the modern solutions:Google Analytics Approach

Page 38: Front-end optimisation & jQuery Internals (Pycon)

3. Post­load responsiveness

Page 39: Front-end optimisation & jQuery Internals (Pycon)

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

Many factors

Page 40: Front-end optimisation & jQuery Internals (Pycon)

Post­load responsiveness techniques

Minimising Reflows & RepaintsJavaScript Optimisation

Page 41: Front-end optimisation & jQuery Internals (Pycon)

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.

Page 42: Front-end optimisation & jQuery Internals (Pycon)

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.

Page 43: Front-end optimisation & jQuery Internals (Pycon)

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.

Page 44: Front-end optimisation & jQuery Internals (Pycon)

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

Page 45: Front-end optimisation & jQuery Internals (Pycon)

Minimising reflows Batch style updates

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

Page 46: Front-end optimisation & jQuery Internals (Pycon)

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:

Page 47: Front-end optimisation & jQuery Internals (Pycon)

Minimising reflows

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

Page 48: Front-end optimisation & jQuery Internals (Pycon)

Minimising reflows

Apply animations with position fixed or absolute

Page 49: Front-end optimisation & jQuery Internals (Pycon)

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

Page 50: Front-end optimisation & jQuery Internals (Pycon)

Web Workers API

 Draft Recommendation — 12 May 2010  Background workers running scripts in   

parallel to the main page Message passing

Page 51: Front-end optimisation & jQuery Internals (Pycon)

Some JavaScript Optimisations

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

Page 52: Front-end optimisation & jQuery Internals (Pycon)

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)

Page 53: Front-end optimisation & jQuery Internals (Pycon)
Page 54: Front-end optimisation & jQuery Internals (Pycon)

jQuery Usage

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

Page 55: Front-end optimisation & jQuery Internals (Pycon)

jQuery Usage

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

Page 56: Front-end optimisation & jQuery Internals (Pycon)

jQuery Performance

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

Page 57: Front-end optimisation & jQuery Internals (Pycon)

jQuery Productivity

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

Page 58: Front-end optimisation & jQuery Internals (Pycon)

Barebones jQuery 0.1

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

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

Page 59: Front-end optimisation & jQuery Internals (Pycon)

Sample Usage

Page 60: Front-end optimisation & jQuery Internals (Pycon)

Full Source:

Page 61: Front-end optimisation & jQuery Internals (Pycon)

1. Initialisation

Page 62: Front-end optimisation & jQuery Internals (Pycon)

2. jQuery.prototype

Page 63: Front-end optimisation & jQuery Internals (Pycon)

3. Utility methods

Page 64: Front-end optimisation & jQuery Internals (Pycon)

4. Aliases

Page 65: Front-end optimisation & jQuery Internals (Pycon)

5. Sample Plug­ins

Page 66: Front-end optimisation & jQuery Internals (Pycon)

jQuery Instance (Matched/Wrapped Set)

Page 67: Front-end optimisation & jQuery Internals (Pycon)

Two fundamental pieces of functionality in jQuery

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

Page 68: Front-end optimisation & jQuery Internals (Pycon)

jQuery optimisation

Page 69: Front-end optimisation & jQuery Internals (Pycon)
Page 70: Front-end optimisation & jQuery Internals (Pycon)
Page 71: Front-end optimisation & jQuery Internals (Pycon)
Page 72: Front-end optimisation & jQuery Internals (Pycon)

Use the latest version

Page 73: Front-end optimisation & jQuery Internals (Pycon)

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

Page 74: Front-end optimisation & jQuery Internals (Pycon)

Specific on the right & generic on the left

Page 75: Front-end optimisation & jQuery Internals (Pycon)

Chain or cache selections

Page 76: Front-end optimisation & jQuery Internals (Pycon)

Don't act on empty sets

Page 77: Front-end optimisation & jQuery Internals (Pycon)

Class selectors

Page 78: Front-end optimisation & jQuery Internals (Pycon)

jQuery.fn.find

Page 79: Front-end optimisation & jQuery Internals (Pycon)

Events

Page 80: Front-end optimisation & jQuery Internals (Pycon)

Memory Leaks

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

Page 81: Front-end optimisation & jQuery Internals (Pycon)

Memory Leaks

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

Page 82: Front-end optimisation & jQuery Internals (Pycon)

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

Page 83: Front-end optimisation & jQuery Internals (Pycon)

jQuery: what's coming

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

Page 84: Front-end optimisation & jQuery Internals (Pycon)

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

Page 85: Front-end optimisation & jQuery Internals (Pycon)

Tools & Resources

Page 86: Front-end optimisation & jQuery Internals (Pycon)

Google Closure Compiler

Page 87: Front-end optimisation & jQuery Internals (Pycon)

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

Page 88: Front-end optimisation & jQuery Internals (Pycon)

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

Page 89: Front-end optimisation & jQuery Internals (Pycon)

CuzillionOpen­source web performance exploration tool 

Page 90: Front-end optimisation & jQuery Internals (Pycon)
Page 91: Front-end optimisation & jQuery Internals (Pycon)

v

Books

Page 92: Front-end optimisation & jQuery Internals (Pycon)

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/

Page 93: Front-end optimisation & jQuery Internals (Pycon)

Thanks

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