Your SlideShare is downloading. ×
0
YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist
Evolution
 
 
developer.yahoo.com/performance/rules.html
Put Scripts at Bottom
Minimize HTTP Requests
Use a Content Delivery Network (CDN)
 
JS Loader Frameworks changed the game
YUI  LABjs   HeadJS  ControlJS RequireJS  Load.js YepNope.js  $script.js LazyLoad  curl.js DeferJS   jquery.defer.js   jQl...
 
dd, substitute and slider tabview, oop, event, node, widget, etc yui seed loader
Static Combo Strategy
 
 
Data-driven initialization routine
Using app-rollout files
Using app-rollout files
Rollout  vs  Loader
Rollout Composition Library Plugins Custom Init.js
A big app-rollout takes more time to download and can potentially freeze the browser
Simple rollout
Interactivity Core & Lazy Components
 
Defining the interactivity core is crucial
 
Core and Lazy Components core rollout lazy components
Parallel Download Strategy
Get app-rollout early without compromising domready and onload
“ Ideal Solution”
 
Parallel Download: Challenges <ul><li>Produce a VERY tiny non-blocking bootstrap </li></ul><ul><li>Avoid blocking onload w...
Event Binder Strategy
Time to Interactivity
Time to Interactivity
Users should be able to interact with the page at any time
Catch and hold  some  events until the handler become available
But, doing so  without  increasing the complexity of the application
yuilibrary.com/gallery/show/event-binder
Event Binder: Features <ul><li>Event-driven Module Loading </li></ul><ul><li>Early Event Binding </li></ul>
Event-driven Module Loading
Regular YUI 3 Module
Event-driven Module Loading
Early Event Binding
Early Event Binding
 
iFrame Strategy
Plug & Play Widgets
A Plug & Play Widget is an independent piece of software that can run on any page
Widgets: Challenges <ul><li>Inject the widget without degrading the host page </li></ul><ul><li>Keep the widget JavaScript...
A YUI instance can be tailored to work off a different document
yuilibrary.com/gallery/show/parent-window
Injecting a widget using an iframe
widget-app-rollout.js
Preload Strategy
http://www.linkedin.com/jsearch
Preload: Features <ul><li>Store static JS assets in cache    without executing them </li></ul><ul><li>Store static CSS ass...
Stay ahead of the users  without  increasing the complexity of the app
yuilibrary.com/gallery/show/preload
 
 
…  some more thoughts <ul><li>Optimize only if it doesn’t add complexity to your app </li></ul><ul><li>Granularity is good...
Thanks! Caridy Patino http://github.com/caridy http://twitter.com/caridy
Upcoming SlideShare
Loading in...5
×

JS Loading strategies

3,468

Published on

Faster web sites attract more users, engage them longer, and decrease the abandon rate drastically.In the quest for making a website faster, a solid loading strategy is an important vector. Dynamic injections, controlling early user interactions, parallel downloads, preloading, and iframe-loader are all well established strategies that you can use to improve performance. Knowing them is
critical for success, specially for complex web applications.

Things you will learn from this presentation:
a) Why picking up the right loading strategy is important.
b) Different strategies that you can use today.
c) Different tools under the YUI umbrella that you can use today.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,468
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "JS Loading strategies"

  1. 1. YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist
  2. 2. Evolution
  3. 5. developer.yahoo.com/performance/rules.html
  4. 6. Put Scripts at Bottom
  5. 7. Minimize HTTP Requests
  6. 8. Use a Content Delivery Network (CDN)
  7. 10. JS Loader Frameworks changed the game
  8. 11. YUI LABjs HeadJS ControlJS RequireJS Load.js YepNope.js $script.js LazyLoad curl.js DeferJS jquery.defer.js jQl DominateJS JSL Bootstrap StealJS bdLoad NBL.js https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0
  9. 13. dd, substitute and slider tabview, oop, event, node, widget, etc yui seed loader
  10. 14. Static Combo Strategy
  11. 17. Data-driven initialization routine
  12. 18. Using app-rollout files
  13. 19. Using app-rollout files
  14. 20. Rollout vs Loader
  15. 21. Rollout Composition Library Plugins Custom Init.js
  16. 22. A big app-rollout takes more time to download and can potentially freeze the browser
  17. 23. Simple rollout
  18. 24. Interactivity Core & Lazy Components
  19. 26. Defining the interactivity core is crucial
  20. 28. Core and Lazy Components core rollout lazy components
  21. 29. Parallel Download Strategy
  22. 30. Get app-rollout early without compromising domready and onload
  23. 31. “ Ideal Solution”
  24. 33. Parallel Download: Challenges <ul><li>Produce a VERY tiny non-blocking bootstrap </li></ul><ul><li>Avoid blocking onload with app-rollout </li></ul><ul><li>Split the app-rollout into multiple and balanced files </li></ul>
  25. 34. Event Binder Strategy
  26. 35. Time to Interactivity
  27. 36. Time to Interactivity
  28. 37. Users should be able to interact with the page at any time
  29. 38. Catch and hold some events until the handler become available
  30. 39. But, doing so without increasing the complexity of the application
  31. 40. yuilibrary.com/gallery/show/event-binder
  32. 41. Event Binder: Features <ul><li>Event-driven Module Loading </li></ul><ul><li>Early Event Binding </li></ul>
  33. 42. Event-driven Module Loading
  34. 43. Regular YUI 3 Module
  35. 44. Event-driven Module Loading
  36. 45. Early Event Binding
  37. 46. Early Event Binding
  38. 48. iFrame Strategy
  39. 49. Plug & Play Widgets
  40. 50. A Plug & Play Widget is an independent piece of software that can run on any page
  41. 51. Widgets: Challenges <ul><li>Inject the widget without degrading the host page </li></ul><ul><li>Keep the widget JavaScript in a sandbox </li></ul><ul><li>Keep the widget CSS in a sandbox </li></ul>
  42. 52. A YUI instance can be tailored to work off a different document
  43. 53. yuilibrary.com/gallery/show/parent-window
  44. 54. Injecting a widget using an iframe
  45. 55. widget-app-rollout.js
  46. 56. Preload Strategy
  47. 57. http://www.linkedin.com/jsearch
  48. 58. Preload: Features <ul><li>Store static JS assets in cache without executing them </li></ul><ul><li>Store static CSS assets in cache without including them </li></ul>
  49. 59. Stay ahead of the users without increasing the complexity of the app
  50. 60. yuilibrary.com/gallery/show/preload
  51. 63. … some more thoughts <ul><li>Optimize only if it doesn’t add complexity to your app </li></ul><ul><li>Granularity is good for optimization </li></ul><ul><li>Rollouts can help you to control the loading process </li></ul><ul><li>Focus on the bottle necks that affect the majority of your users </li></ul><ul><li>Work on the user perception </li></ul>
  52. 64. Thanks! Caridy Patino http://github.com/caridy http://twitter.com/caridy
  1. A particular slide catching your eye?

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

×