js 异步加载 延迟执行 插件
最近因工作的需要主要做web前段的优化，其中之一就是js的优化，在项目中的js代码相对比较规范的，都是$(function(){})这种格式。但是大家都知道js的下载比较耗时的，它的解析和执行是阻塞式的。我们是否可以先让js下载下来，在windows的load事件中在去解析和执行了。答案是肯定的，其中ControlJS .js就实现了这种方式。个人觉得它比LAB的延迟加载要优秀的一点，减少了js的加载时间。但是该js功能相对比较强大，同时也没有解决js依赖关系的加载。个人自己写了一个小插件 来实现js异步加载延迟执行。
代码如下：
[javascript]
(function () {
var document = window.document;
var getAttribute = function (elem, name) {
var attrs = elem.attributes;
var len = attrs.length;
for (var i = 0; i < len; i++) {
var attr = attrs[i];
if (name === attr.nodeName) {
return attr.nodeValue;
}
}
return undefined;
};
var scriptsData;
var orders = [];
var findScripts = function () {
var aScripts = document.getElementsByTagName('script');
var len = aScripts.length;
var scriptsArr = [];
var scriptsSrc = [];
for (var i = 0; i < len; i++) {
var script = aScripts[i];
if ("text/asynjs" === getAttribute(script, "type") && "undefined" === typeof (script.founded)) {
script.founded = true;
var order = getAttribute(script, "order") || getAttribute(script, "data-order") || 0;
script.order = order;
if (orders.indexOf(order) < 0) {
orders.push(order);
}
var src = getAttribute(script, "asynsrc") || getAttribute(script, "data-asynsrc");
script.src = src;
if (src && scriptsSrc.indexOf(src) < 0) {
scriptsArr.push(script);
}
}
}
orders.sort(function compare(a, b) { return a - b; });
return scriptsData = scriptsArr;
};
var downloadScripts = function (scriptArr) {
var scripts = scriptArr || findScripts();
var len = scripts.length;
for (var i = 0; i < len; i++) {
var img = new Image();
img.src = scripts[i].src;
img.style.display = "none";
}
};
var processScripts = function (scriptArr) {
var scripts = (scriptArr && scriptArr.constructor === Array) ? scriptArr : scriptsData;
var len = scripts.length;
var failscripts = [];
var wdata = [];
for (var i = orders.length - 1; i >= 0; i--) {
var order = orders[i];
var urls = [];
var fns = [];
for (var j = 0, len = scripts.length; j < len; j++) {
var script = scripts[j];
if (script.order == order) {
urls.push(script.src);
}
}
if (i == orders.length - 1) {
wdata[order] = processScript(urls)
}
else {
var nextorder = orders[i + 1];
fns.push(wdata[nextorder]);
wdata[order] = processScript(urls, fns);
}
}
var exorder = orders[0]
wdata[orders[0]]();
};
v
补充：web前端 , JavaScript ,
