Front-end optimisation & jQuery Internals (Pycon)
2 likes630 views
This document discusses optimizing jQuery and front-end performance. It covers minimizing HTTP requests, file size, and blocking behavior to improve dependency loading. It discusses optimizing initial page rendering through asset ordering, lazy loading, and avoiding reflows and repaints. The document also covers post-load responsiveness techniques like JavaScript optimizations. It provides an overview of jQuery internals and optimizations like chaining selections and avoiding empty sets. Tools mentioned include Google Closure Compiler, dynaTrace AJAX Edition, and Cuzillion.
Front-end optimisation & jQuery Internals (Pycon)
- 1. jQuery internals and frontend optimisation Artur Cistov – PyCon Ireland 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
- 9. Plan for this talk Frontend optimisation jQuery under the hood jQuery optimisation Tools & Resources
- 13. 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
- 15. Dependency Loading Optimisation Techniques Minimising HTTP Requests Minimising total filesize Maximising parallel downloads Addressing blocking behaviour
- 17. Minimising HTTP Requests Combining multiple JS & CSS files, combining images into sprites Avoiding requests alltogether with caching (Expires & ETag headers)
- 19. Filesize Gzipping Minifying scripts & styles Compressing images
- 20. Maximising parallel downloads Browsers have 26 simultaneous request limit per domain name. Subdomains are treated as different domains in this context
- 21. 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/
- 22. Statically loading scripts (blocking) Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
- 23. Dynamically loading scripts Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
- 27. 2. Speeding Up Initial Page Rendering
- 28. Speeding up onload render techniques Assets order .js class trick Lazy Loading Banners & tracking scripts Flash of Unscripted Content
- 29. Assets Order CSS at the top, JavaScript at the bottom Avoid @import for CSS
- 30. Lazy Loading Deferring loading of a component after page load Module loader coming in jQuery 1.5? Facebook Primer library
- 31. .js class trick
- 32. Performance of 3rd Party Content Source: http://www.stevesouders.com/p3pc/
- 33. 3rd Party Content 9 additional HTTP requests for Digg Widget, 107 kB total download size, 665 ms median load time
- 34. Flash of unscripted content problem Elements are rendered, but their behaviour hasn't been assigned yet
- 37. One of the modern solutions: Google Analytics Approach
- 39. Many factors Source: http://ejohn.org/blog/javascript-performance-stack/
- 40. Postload responsiveness techniques Minimising Reflows & Repaints JavaScript Optimisation
- 41. 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.
- 42. 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.
- 43. 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
- 44. 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
- 45. Minimising reflows Batch style updates Source http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
- 46. 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
- 48. Minimising reflows Apply animations with position fixed or absolute
- 49. 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
- 50. Web Workers API Draft Recommendation — 12 May 2010 Background workers running scripts in parallel to the main page Message passing
- 51. Some JavaScript Optimisations Variable lookup performance Avoiding eval Caching array length in loops Using try/catch sparingly
- 52. 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)
- 54. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
- 55. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
- 56. jQuery Performance Source: http://www.flickr.com/photos/jeresig/4366089661/
- 57. jQuery Productivity Source: http://www.slideshare.net/paul.irish/perfcompression
- 58. Barebones jQuery 0.1 http://github.com/cistov/BarebonesjQuery http://www.flickr.com/photos/voss/71431079/
- 59. Sample Usage
- 60. Full Source:
- 64. 4. Aliases
- 67. Two fundamental pieces of functionality in jQuery jQuery instance methods e.g. $('#nav a').show(); utility ('static') methods $.noConflict();
- 73. 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
- 77. Class selectors
- 78. jQuery.fn.find
- 79. Events
- 80. Memory Leaks Source: http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx
- 81. Memory Leaks Avoid attaching objects to DOM nodes directly Use jQuery methods instead:
- 83. jQuery: what's coming Ajax module rewrite Dependency & load management Templating Data binding Mobile support
- 87. 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
- 88. dynaTrace AJAX Edition http://ajax.dynatrace.com/
- 91. Books v