快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

小金体育登入在线_酒文化网进入



一、关于LABjs的简单先容

作者:Kyle Simpson

感化:动态并行加载脚本文件 以及 治理加载脚本文件的履行顺序

官网:http://www.labjs.com/

二、关于LABjs的应用

以下实例原文链接:http://www.au92.com/archives/labjs.html

更全更具体阐明:http://labjs.com/documentation.php

实例1:

$LAB.script("script1.js")

.script("script2.js").script("script3.js")

.wait(function(){// 等待所有script加载完再履行这个代码块script1Func();

script2Func();script3Func();

});

实例2:

$LAB.script({ src:"script1.js", type:"text/javascript"})

.script("script2.js").script("script3.js")

.wait(function(){// 等待所有script加载完再履行这个代码块script1Func();

script2Func();script3Func();}

);

实例3:

$LAB.script("script1.js","script2.js","script3.js")

.wait(function(){// 等待所有script加载完再履行这个代码块script1Func();

script2Func();script3Func();

});

实例4:

$LAB.script(["script1.js","script2.js"],"script3.js")

.wait(function(){// 等待所有script加载完再履行这个代码块script1Func();

script2Func();script3Func();

});

实例5:

$LAB.scrip小金体育登入在线t("script1.js")

.wait()// 空的wait()只是确保script1在其他代码之前被履行.script("script2.js")// script2 和 script3 依附于 script1

.script("script3.js").wait()// 然则script2 和 script3 并不相互依附,可以并行下载

.script("script4.js")//script4 依附于 script1, script2 及 script3 .wait(function(){script4Func();});

实例6:

$LAB.script("script1.js")// script1, script2, and script3 之间没有依附关系,

.script("script2.js")// 以是可以随意率性顺序履行.script("script3.js")

.wait(function(){// 假如必要,这里当然可以履行javascript函数alert("Scripts 1-3 are loaded!");

}).script("script4.js")// 依附于 script1, script2 及 script3

.wait(function(){script4Func();});

实例7:

$LAB.setOptions({AlwaysPreserveOrder:true})// 设置每个脚本之间等待

.script("script1.js")// script1, script2, script3, script4 相互依附.script("script2.js")// 并且并行下载后循序履行

.script("script3.js").script("script4.js")

.wait(function(){script4Func();

});

实例8:

$LAB.script(function(){

// `_is_IE`的值ie为true ,非ie为falseif(_is_IE){

return"ie.js";// 假如是ie则这个js会被加载}else{

return null;//假如不是ie这个代码就会被略过}

}).script("script1.js")

.wait();

三、LABjs主要采纳加载要领

LABjs里的动态加载脚本文件,是指页面的js脚本履行时,经由过程多种措施去加载外部的js(主要差别于html页面里,经由过程标签静态加载的脚本)

动态加载脚本的要领有很多,优毛病不一,此处不赘述,有兴趣的童鞋可以拜见本文末真个参考链接 :)。

LABjs里主要应用了三种技术,分手为Script Element、XHR Injection以及Cache Trick

首先对这三种加载要领进行简单先容,第四部分再阐发LABjs源码实现里面对着三种要领分其余应用处景

Script Element(LABjs默认采纳加载要领)

最常见的脚本动态加载要领,优点很多,包括:1、实现简单 2、可跨域 3、不会壅闭其他资本的加载 等

Opera/Firefox(老版本)下:脚本履行的顺序与节点被插入页面的顺序同等

IE/Safari/Chrome下:履行顺序无法获得包管

留意:

新版本的Firefox下,脚本履行的顺序与插入页面的顺序不必然同等,但可经由过程将script标签的async属性设置为false来包管顺序履行

老版本的Chrome下,脚本履行的顺序与插入页面的顺序不必然同等,但可经由过程将script标签的async属性设置为false来包管顺序履行

XHR Injection

经由过程ajax哀求加载脚本文件,然后再经由过程以下要领履行:

eval:常见要领

XHR injection:创建一个script元素,并将请加载的脚本文件的内容注入

主要限定:无法跨域

Cache Trick(强依附于浏览器的特点实现,不保举应用)

当你将script元素的type属性设置为浏览器不熟识的值,比如"text/cache"、"text/casper"、"text/hellworld"等,不合浏览器的行径如下:

IE/Safari/Chrome(老版本)里:脚本照常加载,但不会履行,假设浏览器没有禁用缓存,加载后的脚本会被浏览器缓存起来,当必要用到的时刻,只必要从新创建个script标签,将type设为精确的值,src指向之前哀求的文件url即可(相称于从缓存里读文件)

Opera/Firefox:不加载

备注:

强依附于浏览器的特点实现,有可能跟着浏览器特点实现的改变而掉效,不保举应用

新版本的chrome浏览器,将script元素的type设置为非"text/javascript",不会再对脚本文件进行加载

四、LABjs里关于脚本加载采纳规划的判断

轻忽技巧细节,经由过程一段伪代码来描述LABjs里面的实现,大年夜致为:

首先判断是否对哀求的脚本进行预加载(是否进行预加载的判断前提看伪代码注释);

如进行预加载,再判断浏览器是否支持真正的预加载;如支持真正的预加载,则预加载之;如否,判断哀求的脚本是否跟当前页面同域,如实,采纳XHR Injection,如否,采纳Cache Trick;

如不进行预加载,判断浏览器支不支持script元素的async属性(见伪代码注释),如是,设置async属性,并哀求脚本文件;如否,直接经由过程script元素加载脚本文件;

if(ifPreloadScript){//当哀求的脚本文件是否进行预加载:1、必要预加载 2、浏览器支持预加载

if(supportRealPreloading){//假如支持真正的预加载

if(supportPreloadPropNatively){//支持经由过程设置script标签的preload属性,实现script的预加载,以及分离加载和履行

//Nicholas C. Zakas大年夜神的美好希望,尚未有浏览器支持:http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/script.onpreload = callback;

script.newPreload = true;script.src = targetUrl;

}else{

script.onreadystatechange = callback;//着实便是指IE浏览器,假设指定了script元素的src属性,IE浏览器里会急速加载

script.src = targetUrl;//纵然script元素没有被插入页面,callback为预加载后的回调}

}

else if(inSameDomain){//非跨域,采纳XHR Injection:哀求的脚本与当前页面处于同一个域

xhr = new XMLHttpRequest();//因为上个判断已经将IE无小金体育登入在线情地扬弃在这个前提分支之外,以是大年夜胆地用 new XMLHttpRequest()吧xhr.onreadystatechange = callback;

xhr.open("GET",targetUrl);xhr.send();

}

else{//最无奈的后招,Cache Trick,新版chromei已经不支持

script.onload = callback;script.type = 'text/cache';

script.src = targetUrl;}

}else{

if(canContrlExecutionOrderByAsync){//假如能够经由过程script元素的async属性来强制并行加载小金体育登入在线的脚本顺序履行

//kyle大年夜神出力推进的提案,今朝已被html5小组吸收并放入草案:http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order#My_Solutionscript.onload = callback;

script.async = false;//将script元素的async设为false,可以包管script的履行顺序与哀求顺序维持同等script.src = targetUrl;

}

else{

script.onload = callback;script.src = targetUrl;

} }

实际上,当你在页面创建一个img节点,并将其src指向一个脚本文件,在部分浏览器里同样能够起到文件预加载的感化,那么LABjs的作者是不是没有想到这一点呢?

不少LABjs的应用者都向kyle提过上面这个问题,key表示:在现有加载策略已经能够满意需求的环境下,不想让LABjs的设计变小金体育登入在线得更繁杂了(非原话)

写在后面

此处仅仅简单对LABjs的感化、用法以及内部实现简单先容了下,关于内部详细源代码实现的阐发,留待下一篇文章

如有讹夺,请指出 ,如有问题,迎接回覆以及邮件进一步交流 :)

参考资料:

oldj:《LABjs阐发》

steve souders:《Loading Scripts Without Blocking》

Franky:《又说 动态加载 script. ie 下 script Element 的 readyState状态》

大年夜魔I‘m png:《js并行加载,顺序履行》

后续涉猎保举:

Nicholas C. Zakas大年夜神关于脚本加载的设想:http://www.nczonline.net/blog/2011/02/14/separating-javascript-download-and-execution/

kyle Simpson关于脚本加载的提案:http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order#My_Solution

kely Simpson关于Firefox某版本去掉落脚本履行顺序包管的回应:http://blog.getify.com/ff4-script-loaders-a小金体育登入在线nd-order-preservation/

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: