yui 3 loading strategies - yuiconf2010
DESCRIPTION
A robust loading strategy is one of the most important pieces when you think about optimization for high traffic websites. YUI Loader is a wonderful piece of software, and learning how to leverage it is a MUST-HAVE for YUI developers. Dynamic injections, controlling early user interactions, parallel downloads, preloading asssets, and window-iframe loading strategies are some of the topics that Caridy will cover in this presentation.TRANSCRIPT
YUI 3 Loading Strategies
Caridy Patino / @caridyFrontend EngineerYahoo! SearchYUI Evangelist
… since YUIConf 2009
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g., “mod-name-ie”)
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g., “mod-name-ie”)
- Fast Boot & _YUI
What has changed since 2009?
- YUI().use ( ‘gallery-yui2’ )
- YUI 2in3 Project: Y.use(‘yui2-*’)
- Conditional loading (e.g., “mod-name-ie”)
- Fast Boot & _YUI
- SimpleYUI
YUI Loading Strategy Evolution
developer.yahoo.com/performance/rules.html
…YUI3 changes the game
YUI < 3.3.0 Loader Limitations
- Concurrent loading
- Queueing and aggregation
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 Y.use()
Rollout Composition
YUI Core
Gallery
2in3
CustomInit.js
A big app-rollout takes more time to download and can potentially freeze the browser
SimpleYUI is a rollout
github.com/yui/yui3/tree/master/src/simpleyui/concat.sh
Interactivity Core & Lazy Components
Defining the interactivity core will help to reduce the app-rollout size through lazy components
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
• Produce a VERY tiny non-blocking bootstrap
• Avoid blocking onload with app-rollout
• Split the app-rollout into multiple and balanced files
Event Binder Strategy
Time to Interactivity
Timeline
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
- Event-driven Module Loading
- Early Event Binding
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
- Inject the widget without degrading the host page
- Keep the widget JavaScript in a sandbox
- Keep the widget CSS in a sandbox
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
Modules using document and window
Use “Y.config.win” and “Y.config.doc” instead.
/var/node/yui3-gallery/src15:25:59 none:src $ grep -rinl "document\." */js/*.js
gallery-accordion/js/gallery-accordion-item.jsgallery-accordion/js/gallery-accordion.jsgallery-aui-autocomplete/js/gallery-aui-autocomplete.jsgallery-aui-base/js/gallery-aui-core.jsgallery-aui-chart/js/gallery-aui-chart.jsgallery-aui-color/js/gallery-aui-color.jsgallery-aui-dialog/js/gallery-aui-dialog.jsgallery-aui-editable/js/gallery-aui-editable.js.jsgallery-boxshadow-anim/js/boxshadow-anim.jsgallery-charts/js/Renderer.jsgallery-dimensions/js/Dimensions.jsgallery-event-pasted/js/pasted.jsgallery-exprbuilder/js/ExpressionBuilder.jsgallery-formvalidator/js/BaseInputField.jsgallery-lightbox/js/lightbox.jsgallery-modernizr/js/modernizr.jsgallery-notifications/js/notifications.jsgallery-overlay-extras/js/overlay-extras.jsgallery-overlay-modal/js/overlay-modal.jsgallery-scrollintoview/js/ScrollIntoView.jsgallery-simple-editor/js/simple-editor.jsgallery-simple-editor/js/toolbar.jsgallery-speedns/js/speedns.jsgallery-stalker/js/gallery-stalker.jsgallery-tabby/js/tabby.jsgallery-textarea-counter/js/textarea-counter.jsgallery-treeview/js/Node.jsgallery-treeview/js/TextNode.jsgallery-treeview/js/TreeViewEd.jsgallery-treeview/js/TreeView.js
/var/node/yui3-gallery/src15:28:13 none:src $ grep -rinl "window\." */js/*.js
gallery-aui-node-html5-print/js/gallery-aui-node-html5-print.jsgallery-beforeunload/js/beforeunload.jsgallery-history-lite/js/history-lite.jsgallery-markout/js/markout.jsgallery-modernizr/js/modernizr.jsgallery-notifications/js/notifications.jsgallery-parent-window/js/gallery-parent-window.jsgallery-sandbox/js/sandbox.jsgallery-scrollintoview/js/ScrollIntoView.jsgallery-shoveler/js/shoveler.jsgallery-simple-editor/js/simple-editor.jsgallery-treeview/js/TreeView.js
…a mental note
… 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
Thanks!
Caridy Patinohttp://github.com/caridyhttp://twitter.com/caridy
Bonus Section
Preload Strategy
http://www.linkedin.com/jsearch
Preload: Features
- Store static JS assets in cache without executing them
- Store static CSS assets in cache without including them
Stay ahead of the users without increasing the complexity of the app
yuilibrary.com/gallery/show/preload
Preload: Implementation
- (new Image()).src = f; // for IE
- doc.createElement('object').data = f; // for others
- Stoyan: Preload CSS/JS without execution http://www.phpied.com/preload-cssjavascript-without-execution/
- Stoyan: Preload, then execute http://www.phpied.com/preload-then-execute/