Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Front-end optimisation & jQuery Internals
Similaire à Front-end optimisation & jQuery Internals (20)
Dernier
Dernier (20)
Front-end optimisation & jQuery Internals
- 1. jQuery internals and frontend optimisation Artur Cistov DrupalCamp Ballyvaughan 2010
- 2. 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
- 4. 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/
- 6. Quake II GWT Port Source: http://www.youtube.com/watch?v=XhMN0wlITLk
- 7. Quake II GWT Port What browser features does this rely on? Just about every HTML5 buzzword you've heard for the past year or so: Canvas/WebGL: For obvious reasons <audio>: For sound <video>: For ingame videos Web Sockets: For clientserver communication Local Storage: For saving prefs. and saved games Source: http://code.google.com/p/quake2-gwt-port/wiki/FAQ
- 8. Plan for this talk Frontend optimisation jQuery under the hood jQuery optimisation Tools & Resources
- 10. 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
- 12. Dependency Loading Optimisation Techniques Minimising HTTP Requests Minimising total filesize Maximising parallel downloads Addressing blocking behaviour
- 14. Minimising HTTP Requests Combining multiple JS & CSS files, combining images into sprites Avoiding requests alltogether with caching (Expires & ETag headers)
- 16. Filesize Gzipping Minifying scripts & styles Compressing images
- 17. Maximising parallel downloads Browsers have 26 simultaneous request limit per domain name. Subdomains are treated as different domains in this context
- 18. 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/
- 19. Statically loading scripts (blocking) Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
- 20. Dynamically loading scripts Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
- 22. 2. Speeding Up Initial Page Rendering
- 23. Speeding up onload render techniques Assets order .js class trick Lazy Loading Banners & tracking scripts Flash of Unscripted Content
- 24. Assets Order CSS at the top, JavaScript at the bottom Avoid @import for CSS
- 25. Lazy Loading Deferring loading of a component after page load Module loader coming in jQuery 1.5? Facebook Primer library
- 26. .js class trick
- 27. Performance of 3rd Party Content Source: http://www.stevesouders.com/p3pc/
- 28. 3rd Party Content 9 additional HTTP requests for Digg Widget, 107 kB total download size, 665 ms median load time
- 29. Flash of unscripted content problem Elements are rendered, but their behaviour hasn't been assigned yet
- 32. One of the modern solutions: Google Analytics Approach
- 34. Many factors Source: http://ejohn.org/blog/javascript-performance-stack/
- 35. Postload responsiveness techniques Minimising Reflows & Repaints JavaScript Optimisation
- 36. 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.
- 37. 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.
- 38. 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
- 39. 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
- 40. Minimising reflows Batch style updates Source http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
- 41. 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
- 43. Minimising reflows Apply animations with position fixed or absolute
- 44. 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
- 45. Web Workers API Draft Recommendation — 12 May 2010 Background workers running scripts in parallel to the main page Message passing
- 46. Some JavaScript Optimisations Variable lookup performance Avoiding eval Caching array length in loops Using try/catch sparingly
- 47. 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)
- 49. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
- 50. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
- 51. jQuery Performance Source: http://www.flickr.com/photos/jeresig/4366089661/
- 52. jQuery Productivity Source: http://www.slideshare.net/paul.irish/perfcompression
- 53. 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
- 54. Sample Usage
- 55. Full Source:
- 59. 4. Aliases
- 62. Two fundamental pieces of functionality in jQuery jQuery instance methods e.g. $('#nav a').show(); utility ('static') methods $.noConflict();
- 64. Use the latest version 1.2.6 shipping with Drupal 6 1.4.2 shipping with Drupal 7
- 65. 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
- 69. Class selectors
- 70. jQuery.fn.find
- 71. Events
- 72. Memory Leaks Source: http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx
- 73. Memory Leaks Avoid attaching objects to DOM nodes directly Use jQuery methods instead:
- 75. jQuery: what's coming Ajax module rewrite Dependency & load management Templating Data binding Mobile support
- 79. 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
- 80. dynaTrace AJAX Edition http://ajax.dynatrace.com/
- 82. Books v
- 84. Thanks http://www.slideshare.net/cistov http://www.twitter.com/cistov http://github.com/cistov/