JS Loading strategies


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.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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