jQuery internals and front­end 
            optimisation




    Artur Cistov ­ DrupalCamp Ballyvaughan 2010
Why bother?


500ms slower = 20% drop in traffic (Google)
400ms slower = 5­9% drop in full­page traffic (Yahoo)
100ms slow...
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 p...
280slides.com
Quake II GWT Port




          Source: http://www.youtube.com/watch?v=XhMN0wlITLk
Quake II GWT Port

What browser features does this rely on?
Just about every HTML5 buzzword you've heard for
the past year...
Plan for this talk


  Front­end optimisation

  jQuery under the hood

  jQuery optimisation

  Tools & Resources
Front­end Optimisation

1. Dependency loading
2. Initial Rendering
3. Post­load responsiveness
1. Dependency Loading

  Total time needed to download all the 
  page assets (images, stylesheets, scripts 
  etc.)

  ...
Full vs. Empty Cache
Dependency Loading Optimisation 
          Techniques

  Minimising HTTP Requests

  Minimising total filesize

  Maxim...
developer.yahoo.com/performance/
Minimising HTTP Requests


  Combining multiple JS & CSS files, 
  combining images into sprites

  Avoiding requests al...
Image Sprite Examples
Filesize


  Gzipping

  Minifying scripts & styles

  Compressing images
Maximising parallel downloads


  Browsers have 2­6 simultaneous request 
  limit per domain name. 

  Subdomains are tr...
Maximising parallel downloads


  LABjs ­ “all-purpose, on-demand
  JavaScript loader, capable of loading any
  JavaScrip...
Statically loading scripts 
        (blocking)




         Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-s...
Dynamically loading scripts




          Source: http://blog.getify.com/2009/11/labjs-new-hotness-for-script-loading/
Non­blocking loading: 
  Google Analytics
2. Speeding Up Initial Page 
        Rendering
Speeding up onload render ­ 
            techniques

  Assets order

  .js class trick

  Lazy Loading

  Banners & tr...
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 ...
.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 l...
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. Post­load responsiveness
Many factors




       Source: http://ejohn.org/blog/javascript-performance-stack/
Post­load responsiveness 
            techniques


  Minimising Reflows & Repaints

  JavaScript Optimisation
Repaints

  Occur when something made visible or 
  hidden without altering the layout. 

  E.g. outline added to an ele...
Reflows


  Reflow occurs when the DOM is 
  manipulated in a way it affects the 
  layout. E.g. style is changed to affe...
Reflows
Reflows are very expensive in terms of 
performance, and is one of the main causes 
of slow DOM scripts, especiall...
Reflows are triggered by


    Style is changed that affects the layout

    className property of an element is changed...
Minimising reflows

    Batch style updates




                          Source http://www.phpied.com/rendering-repaint-...
Minimising reflows

Batch DOM changes and/or perform them off the DOM:

    Detaching element from the DOM, making change...
Minimising reflows




Source http://wiki.forum.nokia.com/index.php/JavaScript_Performance_Best_Practices#Use_createDocume...
Minimising reflows

    Apply animations with position fixed or 
    absolute
Underlying Problem of Single 
              Thread

  UI rendering & JavaScript share the 
  same thread of execution

 ...
Web Workers API

   Draft Recommendation — 12 May 2010

   Background workers running scripts in   
  parallel to the ma...
Some JavaScript Optimisations


  Variable lookup performance

  Avoiding eval

  Caching array length in loops

  Usi...
Front­end Optimisation Recap:

1. Dependency loading (HTTP requests, 
  filesize, parallel downloads, blocking)
2. Renderi...
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
...
Sample Usage
Full Source:
1. Initialisation
2. jQuery.prototype
3. Utility methods
4. Aliases
5. Sample Plug­ins
jQuery Instance 
(Matched/Wrapped Set)
Two fundamental pieces of 
      functionality in jQuery


  jQuery instance methods 
e.g. $('#nav a').show();

  utilit...
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 ...
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 viewer
 http://james.padolsey.com/jquery
jQuery: what's coming

  Ajax module rewrite

  Dependency & load management

  Templating

  Data binding

  Mobile ...
jQuery Dublin
http://meetups.jquery.com/group/jquerydublin
Tools & Resources
Google Closure Compiler
Google Closure Compiler

   Open­source, written in Java & easy to extend

   Three modes 

   Up to 60­70% filesize sa...
dynaTrace AJAX Edition
    http://ajax.dynatrace.com/
Cuzillion
Open­source web performance exploration tool 
Books



        v
Links
Yahoo Exceptional performance team
http://developer.yahoo.com/performance/

Nokia JavaScript Performance Best Practi...
Thanks
http://www.slideshare.net/cistov
 http://www.twitter.com/cistov
    http://github.com/cistov/
Front-end optimisation & jQuery Internals
Front-end optimisation & jQuery Internals
Upcoming SlideShare
Loading in...5
×

Front-end optimisation & jQuery Internals

2,960

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,960
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Front-end optimisation & jQuery Internals

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

    Clipping is a handy way to collect important slides you want to go back to later.

×