Front-end optimisation & jQuery Internals (Pycon)

1,930 views

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,930
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
39
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Front-end optimisation & jQuery Internals (Pycon)

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

×