Upgrade Your YUI3

Upgrade your yui3 from 3.3.0 to the latest version, there's a very useful property of yui config which is 'async' to make your js files load more faster!

Transcript

1. Async —— upgrade your yui3...
2. Dynamic Script Load
3. Dynamic Script Execution Order
4. • IE • Firefox • Chrome • Safari • Opera Dynamic Script Execution Order
5. Combo
6. Serial vs. Parallel Loading 3.3.0 3.5.1 23s 8s
7. async: true YUI.GlobalConfig = { base: 'http://a.tbcdn.cn/s/yui/' + YUI.version + '/build/', comboBase: 'http://a.tbcdn.cn/s/yui/' + YUI.version + '/build/??', root: '', charset: 'gbk', comboSep: ',', maxURLLength: 2048, combine: true, async: true, // default true groups: { } }; since 3.5.0...
8. • Not loaded • Loaded • Attached Module States
9. Module States - 2 YUI.add('module-a', function(Y) { // will be attached to Y after used Y.ModuleA = {}; }); YUI().use('module-a', function(Y) { // Y.ModuleA is available }); YUI().use('node', function(Y) { // another YUI instance // module-a is not attached to Y }); 1 0
10. Module States -3 YUI().use('a', 'b', 'c', function(Y) { // 1. loading modules a, b, c in parallel // 2. all modules are loaded // 3. attached a, b, c to Y in order // 4. all modules are available now in this callback });
11. Warning !!!
12. Custom Unwrapped Module YUI({ modules: { a: { // 8s fullpath: 'http://a.tbcdn.cn/app/dp/insure/autoins/js/a.php' }, b: { // 2s fullpath: 'http://a.tbcdn.cn/app/dp/insure/autoins/js/b.php', requires: ['a'] } } }).use('b');
13. Custom Unwrapped Module - 2 YUI({ modules: { a: { // 8s fullpath: 'http://a.tbcdn.cn/app/dp/insure/autoins/js/a.php', async: false }, b: { // 2s fullpath: 'http://a.tbcdn.cn/app/dp/insure/autoins/js/b.php', async: false, requires: ['a'] } } }).use('b');
14. • IE 2048 • Apache 8192 • 3.3.0 2048 || 8192 • 3.5.1 1024 || 2048 maxURLLength
15. 3.3.0 3.5.1 http://a.tbcdn.cn/??s/yui/3.5.1/build/oop/oop-min.js,s/yui/3.5.1/ build/event-custom-base/event-custom-base-min.js,s/yui/3.5.1/build/ dom-core/dom-core-min.js,s/yui/3.5.1/build/dom-base/dom-base- min.js,s/yui/3.5.1/build/selector-native/selector-native-min.js,s/ yui/3.5.1/build/selector/selector-min.js,s/yui/3.5.1/build/node-core/ node-core-min.js,s/yui/3.5.1/build/node-base/node-base-min.js,s/yui/ 3.5.1/build/event-base/event-base-min.js,s/yui/3.5.1/build/event- delegate/event-delegate-min.js,s/yui/3.5.1/build/node-event-delegate/ node-event-delegate-min.js,s/yui/3.5.1/build/pluginhost-base/ pluginhost-base-min.js,s/yui/3.5.1/build/pluginhost-config/ pluginhost-config-min.js,s/yui/3.5.1/build/node-pluginhost/node- pluginhost-min.js,s/yui/3.5.1/build/dom-style/dom-style-min.js,s/yui/ 3.5.1/build/dom-screen/dom-screen-min.js,s/yui/3.5.1/build/node- screen/node-screen-min.js,s/yui/3.5.1/build/node-style/node-style- min.js http://a.tbcdn.cn/??s/yui/3.3.0/build/oop/oop-min.js,s/yui/3.3.0/ build/event-custom/event-custom-base-min.js,s/yui/3.3.0/build/event/ event-base-min.js,s/yui/3.3.0/build/pluginhost/pluginhost-min.js,s/ yui/3.3.0/build/dom/dom-min.js,s/yui/3.3.0/build/node/node-min.js,s/ yui/3.3.0/build/event/event-delegate-min.js 311 919 comboLength
16. 3.3.0 3.5.1 http://a.tbcdn.cn/s/yui/3.5.1/build/??oop/oop-min.js,event-custom- base/event-custom-base-min.js,dom-core/dom-core-min.js,dom-base/dom- base-min.js,selector-native/selector-native-min.js,selector/selector- min.js,node-core/node-core-min.js,node-base/node-base-min.js,event- base/event-base-min.js,event-delegate/event-delegate-min.js,node- event-delegate/node-event-delegate-min.js,pluginhost-base/pluginhost- base-min.js,pluginhost-config/pluginhost-config-min.js,node- pluginhost/node-pluginhost-min.js,dom-style/dom-style-min.js,dom- screen/dom-screen-min.js,node-screen/node-screen-min.js,node-style/ node-style-min.js http://a.tbcdn.cn/s/yui/3.3.0/build/??oop/oop-min.js,event-custom/ event-custom-base-min.js,event/event-base-min.js,pluginhost/ pluginhost-min.js,dom/dom-min.js,node/node-min.js,event/event- delegate-min.js 203 613 comboLength - 2
17. So, Upgrade Your YUI3 to 3.5.x...?!
18. • http://yuilibrary.com/yui/docs/get/#serial-vs-parallel-loading • http://yuilibrary.com/yui/docs/yui/#async • http://yuilibrary.com/yui/docs/yui/loader.html • http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order References
19. ] { the end.