JS Loading strategies
Download as PPT, PDF
5 likes2,029 views
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.
JS Loading strategies
- 1. YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist
- 2. Evolution
- 3. 油
- 4. 油
- 6. Put Scripts at Bottom
- 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
- 15. 油
- 16. 油
- 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
- 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
- 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
- 41. Event Binder: Features Event-driven Module Loading Early Event Binding
- 43. Regular YUI 3 Module
- 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
- 54. Injecting a widget using an iframe
- 56. Preload Strategy
- 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
- 61. 油
- 62. 油
- 63. some more thoughts Optimize only if it doesnt 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