front-end optimisation & jquery internals
Post on 17-May-2015
2.890 Views
Preview:
TRANSCRIPT
jQuery internals and frontend optimisation
Artur Cistov DrupalCamp Ballyvaughan 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
Quake II GWT Port
Source: http://code.google.com/p/quake2-gwt-port/wiki/FAQ
What browser features does this rely on?Just about every HTML5 buzzword you've heard forthe past year or so:
Canvas/WebGL: For obvious reasons<audio>: For sound<video>: For ingame videosWeb Sockets: For clientserver communicationLocal Storage: For saving prefs. and saved games
Plan for this talk
Frontend optimisation jQuery under the hood jQuery optimisation Tools & Resources
Frontend Optimisation
1. Dependency loading2. Initial Rendering3. 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 “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/
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
Source: http://ejohn.org/blog/javascript-performance-stack/
Many factors
Postload 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
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 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
Presenting Barebones jQuery 0.1 Small subset of jQuery core Useful for learning about inner workings
of jQuery 50 vs. 6325 lines in full jQuery, so a little
less powerful :) http://github.com/cistov/BarebonesjQuery
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 1.2.6 shipping with Drupal 6 1.4.2 shipping with Drupal 7
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 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 browsersjQuery gained 13% minification improvement by switiching to Google Compiler from YUI compressor
dynaTrace AJAX Editionhttp://ajax.dynatrace.com/
CuzillionOpensource web performance exploration tool
v
Books
Links
Yahoo Exceptional performance teamhttp://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://www.slideshare.net/cistovhttp://www.twitter.com/cistov
http://github.com/cistov/
top related