【原】从一个bug浅谈YUI3组件的资源加载
篇前声明：为了不涉及业务细节，篇内信息统一以某游戏，某功能代替
前不久，某游戏准备内测客户端，开发人员测试过程中发现某功能突然不灵了，之前的测试一切ok，没有发现任何异常，第一反应是，游戏内浏览器都是自己包装的，是不是做了什么改造，触发了某个盲点。
游戏方表示浏览器还是以前包装的Chromium，不过还真有不同的，就是UA改了，而且不是在原UA后加的后缀标识，而是完全替换，使用了游戏名称做UA，问题应该就在这里了，从代码上来看，不会触发任何雷区，理论上不会有问题，如果有问题，极有可能出现在框架中，YUI3的底层逻辑。
顺便抱怨一下，游戏内测试本身就是一个蛋痛的事情，基本都是自己封装浏览器，即使使用同样的内核，也有可能包装方式不同引出不同的坑，下载了一个游戏，使用fiddler神器代理js测试，js又一直被缓存，游戏内也不知道如何清缓存，代理不到，只能转而代理html页面，js加随机数时间戳。
第一步：YUI组件加载完毕打log
YUI({combine: true}).use('node', 'io', 'xml', function (Y) {
Y.log("init");
});
测试结果：没有log，验证了我的想法，影响YUI组件加载，框架层级的
第二步：增减组件测试
测试结果：刚开始毫无规律，确实有部分组件去掉以后可以正常加载，貌似有共同点，但又看不出明确的共同点，跟其他同事沟通，貌似这些组件加载了皮肤，单独加载其它自带皮肤的组件，果然有问题，而不带皮肤就ok
第三步：YUI组件加载打log观察
测试结果：果然，竟然… 只加载了皮肤，没有加载js
这个时候才想起来看抓包… 发现组件真的没加载
第四步：YUI组件加载代码分析
先来看YUI加载过程
从这个抓包图来看，分为四步，yui种子文件—》loader组件配置文件—》组件皮肤—》组件js代码
1. 加载yui.js
可以理解为种子文件，它将负责后续yui的模块加载，当执行YUI.use引用模块时，开始加载loader文件（如果只引用了种子文字，但没有写js去use方法，实际上不会加载模块的）
YUI的_init方法对loader的配置，_init:
config.base = YUI.config.base || Y.Env.getBase(/^(.*)yui\/yui([\.\-].*)js(\?.*)?$/, /^(.*\?)(.*\&)(.*)yui\/yui[\.\-].*js(\?.*)?$/); config.loaderPath = YUI.config.loaderPath || 'loader/loader' + (filter || '-min.') + 'js';
use方法代码片段，开始加载loader
handleBoot = function() {
Y._loading = false;
queue.running = false;
Env.bootstrapped = true;
if (Y._attach(['loader'])) {
Y.use.apply(Y, args);
}
};
if (G_ENV._bootstrapping) {
queue.add(handleBoot);
} else {
G_ENV._bootstrapping = true;
var url = config.base + config.loaderPath;
url += (url.indexOf("?") > -1 ? "&" : "?") + "v=" + Y.Env.CACHE_VERSION;
Y.Get.script(url, {
onEnd: handleBoot
});
}
2. 加载loader.js
yui3为按需加载，Loader相当于所有组件的一个配置文件（yui最新版本已将loader直接放入yui.js，减少一个请求），配置内容包括所有的模块，模块的依赖项，模块的皮肤等，如果模块有皮肤，会优先加载，模块有依赖模块，也需要同时加载
我们来简单看一下loader的代码
"console": {
"requires": [
"yui-log",
"widget",
"substitute"
],
"skinnable": true
}
requires代表它依赖的其它模块，skinnable则代表它需要皮肤
模块添加时有这么一句代码 ，如果有皮肤，则添加皮肤
if (o.skinnable) {
this._addSkin(this.skin.defaultSkin, i, name);
}
_addSkin: function(skin, mod, parent) {
var mdef, pkg, name,
info = this.moduleInfo,
sinf = this.skin,
ext = info[mod] && info[mod].ext;
// Add a module definition for the module-specific skin css
if (mod) {
name = this.formatSkin(skin, mod);
if (!info[name]) {
mdef = info[mod];
pkg = mdef.pkg || mod;
this.addModule({
name: name,
group: mdef.group,
type: 'css',
after: sinf.after,
after_map: YArray.hash(sinf.after),
path: (parent || pkg) + '/' + sinf.base + skin + '/' + mod + '.css',
ext: ext
});
}
}
return name;
}
看一下addskin方法，会根据配置的基准路径寻找该皮肤文件，默认是该组件所在文件夹下面的assets/skins/sam下的同名css文件
3. Loader加载成功
重新回到yui.Js的user方法中来看，此时，该判断就会生效，便拿到了所有loader对象，获取到所有的组件加载项args
if (boot && len && Y.Loader) {
Y._loading = true;
loader = getLoader(Y);
loader.onEnd = handleLoader;
loader.context = Y;
// loader.attaching = args;
loader.data = args;
loader.require((fetchCSS) ? missing : args);
loader.insert(null, (fetchCSS) ? null : 'js');
}
一路追踪到loader.js中的loadNext，我们使用了合并的方式，该方法会将同类资源文件合并加载（js or css），然后调用Y.Get.js or Y.Get. css进行资源文件的加载，由此再追踪到yui.js中的_next方法
4. 组件加载
此时，开始进行组件加载，并跟踪加载流程
if (q.type === "script") {
n = _scriptNode(url, w, q.attributes);
} else {
n = _linkNode(url, w, q.attributes);
}
// track this node's load progress
_track(q.type, n, id, url, w, q.url.length);
创建script or link节点
// add it to the head or insert it before 'insertBefore'. Work around IE
// bug if there is a base tag.
insertBefore = q.insertBefore || d.getElementsByTagName('base')[0];
if (insertBefore) {
s = _get(insertBefore, id);
if (s) {
s.parentNode.insertBefore(n, s);
}
} else {
h.appendChild(n);
}
添加到页面上，这里皮肤css与js并不是完全的并行加载，对于webkit与gecko内核，直接开始加载下一个资源文件，即js
if ((ua.webkit || ua.gecko) && q.type === "css") {
_next(id, url);
}
我们看一下_track方法
if (ua.ie) {
n.onreadystatechange = function() {
var rs = this.readyState;
if ("loaded" === rs || "complete" === rs) {
n.onreadystatechange = null;
f(id, url);
}
};
// webkit prior to 3.x is no longer supported
} else if (ua.webkit) {
if (type === "script") {
// Safari 3.x supports the load event for script nodes (DOM2)
n.addEventListener("load", function() {
f(id, url);
});
}
// FireFox and Opera support onload (but not DOM2 in FF) handlers for
// script nodes. Opera, but not FF, supports the onload event for link
// nodes.
} else {
n.onload = function() {
f(id, url);
};
n.onerror = function(e) {
_fail(id, e + ": " + url);
};
}
ie浏览器通过readystatechange进行判断并加载后续的资源文件，其它浏览器如webkit則监听onload（即使监听失败，_next方法中可直接执行js加载）
我们加载的模块是console，但是只加载了css，js不见了，如下图，我不是webkit，我不是gecko，我也不是IE，然后就进入了死胡同
由于UA变更，没有将其判断为webkit，_next方法没有执行，加载完css后无法直接加载js，故只能依靠track方法，track方法判断其不属于IE浏览器，直接进入了else分支，但由于浏览器本身是Chromium内核，link节点的onload方法无法触发。进入了死万劫不复之地。
解决方法也比较简单，对于非css请求，依赖_trace方法触发回调其它js加载（js加载需要严格时序保证），而css请求，不依赖_trace，直接调用_next触发其它资源加载
该方法改动较小，风险较小，即使后续有新的UA变更或浏览器更新等，仍可以保证正常使用，缺点在于，如果加载过程中发生网络波动等异常，有可能出现样式闪动的问题。
