JS Loading strategies

  • 2,682 views
Uploaded 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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,682
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
27
Comments
0
Likes
5

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