Your SlideShare is downloading. ×
0
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Front-end optimisation & jQuery Internals (Pycon)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Front-end optimisation & jQuery Internals (Pycon)

1,719

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Video of this talk: http://vimeo.com/groups/pyconireland/videos/14083887
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,719
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. jQuery internals and front­end  optimisation Artur Cistov – PyCon Ireland 2010
  • 2. 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
  • 3. Why bother? Google added site speed as a factor to search  ranking on April 9, 2010
  • 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/
  • 5. 280slides.com
  • 6. Quake II GWT Port Source: http://www.youtube.com/watch?v=XhMN0wlITLk
  • 7. Plan for this talk  Front­end optimisation  jQuery under the hood  jQuery optimisation  Tools & Resources
  • 8. Front­end Optimisation 1. Dependency loading 2. Initial Rendering 3. Post­load responsiveness
  • 9. 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
  • 10. Full vs. Empty Cache
  • 11. Dependency Loading Optimisation  Techniques  Minimising HTTP Requests  Minimising total filesize  Maximising parallel downloads  Addressing blocking behaviour
  • 12. developer.yahoo.com/performance/
  • 13. Minimising HTTP Requests  Combining multiple JS & CSS files,  combining images into sprites  Avoiding requests alltogether with  caching (Expires & ETag headers)
  • 14. Image Sprite Examples
  • 15. Filesize  Gzipping  Minifying scripts & styles  Compressing images
  • 16. Maximising parallel downloads  Browsers have 2­6 simultaneous request  limit per domain name.   Subdomains are treated as different  domains in this context
  • 17. 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/
  • 18. Statically loading scripts  (blocking) Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
  • 19. Dynamically loading scripts Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
  • 20. Non­blocking loading:  Google Analytics
  • 21. 2. Speeding Up Initial Page  Rendering
  • 22. Speeding up onload render ­  techniques  Assets order  .js class trick  Lazy Loading  Banners & tracking scripts  Flash of Unscripted Content
  • 23. Assets Order  CSS at the top, JavaScript at the bottom  Avoid @import for CSS
  • 24. Lazy Loading  Deferring loading of a component after  page load  Module loader coming in jQuery 1.5?  Facebook Primer library
  • 25. .js class trick
  • 26. Performance of 3rd Party Content Source: http://www.stevesouders.com/p3pc/
  • 27. 3rd Party Content  9 additional HTTP requests for Digg  Widget, 107 kB total download size, 665  ms median load time
  • 28. Flash of unscripted content problem  Elements are rendered, but their  behaviour hasn't been assigned yet
  • 29. Traditional Solution: Script immediately after element
  • 30. One of the modern solutions: Google Analytics Approach
  • 31. 3. Post­load responsiveness
  • 32. Many factors Source: http://ejohn.org/blog/javascript-performance-stack/
  • 33. Post­load responsiveness  techniques  Minimising Reflows & Repaints  JavaScript Optimisation
  • 34. 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.
  • 35. 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.
  • 36. 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
  • 37. 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
  • 38. Minimising reflows  Batch style updates Source http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
  • 39. 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
  • 40. Minimising reflows Source http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices#Use_createDocumentFragment.28.29
  • 41. Minimising reflows  Apply animations with position fixed or  absolute
  • 42. 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
  • 43. Web Workers API   Draft Recommendation — 12 May 2010   Background workers running scripts in    parallel to the main page  Message passing
  • 44. Some JavaScript Optimisations  Variable lookup performance  Avoiding eval  Caching array length in loops  Using try/catch sparingly
  • 45. 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)
  • 46. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
  • 47. jQuery Usage Source:http://trends.builtwith.com/javascript/JQuery
  • 48. jQuery Performance Source: http://www.flickr.com/photos/jeresig/4366089661/
  • 49. jQuery Productivity Source: http://www.slideshare.net/paul.irish/perfcompression
  • 50. Barebones jQuery 0.1 http://github.com/cistov/Barebones­jQuery http://www.flickr.com/photos/voss/71431079/
  • 51. Sample Usage
  • 52. Full Source:
  • 53. 1. Initialisation
  • 54. 2. jQuery.prototype
  • 55. 3. Utility methods
  • 56. 4. Aliases
  • 57. 5. Sample Plug­ins
  • 58. jQuery Instance  (Matched/Wrapped Set)
  • 59. Two fundamental pieces of  functionality in jQuery  jQuery instance methods  e.g. $('#nav a').show();  utility ('static') methods $.noConflict();
  • 60. jQuery optimisation
  • 61. Use the latest version
  • 62. 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
  • 63. Specific on the right & generic on the left
  • 64. Chain or cache selections
  • 65. Don't act on empty sets
  • 66. Class selectors
  • 67. jQuery.fn.find
  • 68. Events
  • 69. Memory Leaks Source: http://msdn.microsoft.com/en-us/library/bb250448%28VS.85%29.aspx
  • 70. Memory Leaks  Avoid attaching objects to DOM nodes directly  Use jQuery methods instead:
  • 71. jQuery source viewer http://james.padolsey.com/jquery
  • 72. jQuery: what's coming  Ajax module rewrite  Dependency & load management  Templating  Data binding  Mobile support
  • 73. jQuery Dublin http://meetups.jquery.com/group/jquerydublin
  • 74. Tools & Resources
  • 75. Google Closure Compiler
  • 76. 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 browsers  jQuery gained 13% minification improvement by  switiching to Google Compiler from YUI compressor
  • 77. dynaTrace AJAX Edition http://ajax.dynatrace.com/
  • 78. Cuzillion Open­source web performance exploration tool 
  • 79. Books v
  • 80. 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/
  • 81. Thanks http://slideshare.net/cistov http://twitter.com/cistov http://github.com/cistov

×