LABJS源码浅析
一、关于LABjs的简单介绍
作者:Kyle Simpson
作用:动态并行加载脚本文件 以及 管理加载脚本文件的执行顺序
二、关于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.script("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为false
if(_is_IE){
return"ie.js"; // 如果是ie则这个js会被加载
}else{
return null; //如果不是ie这个代码就会被略过
}
})
.script("script1.js")
.wait();
三、LABjs主要采用加载方式
LABjs里的动态加载脚本文件,是指页面的js脚本执行时,通过多种方法去加载外部的js(主要区别于html页面里,通过<script>标签静态加载的脚本)
动态加载脚本的方式有很多,优缺点不一,此处不赘述,有兴趣的童鞋可以参见本文末尾的参考链接 :)。
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_Solution
script.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-and-order-preservation/
LABJS源码浅析的更多相关文章
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- Struts2源码浅析-ConfigurationProvider
ConfigurationProvider接口 主要完成struts配置文件 加载 注册过程 ConfigurationProvider接口定义 public interface Configurat ...
- (转)【深入浅出jQuery】源码浅析2--奇技淫巧
[深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html
- HashSet其实就那么一回事儿之源码浅析
上篇文章<HashMap其实就那么一回事儿之源码浅析>介绍了hashMap, 本次将带大家看看HashSet, HashSet其实就是基于HashMap实现, 因此,熟悉了HashMap ...
- Android 手势识别类 ( 三 ) GestureDetector 源码浅析
前言:上 篇介绍了提供手势绘制的视图平台GestureOverlayView,但是在视图平台上绘制出的手势,是需要存储以及在必要的利用时加载取出手势.所 以,用户绘制出的一个完整的手势是需要一定的代码 ...
- Android开发之Theme、Style探索及源码浅析
1 背景 前段时间群里有伙伴问到了关于Android开发中Theme与Style的问题,当然,这类东西在网上随便一搜一大把模板,所以关于怎么用的问题我想这里也就不做太多的说明了,我们这里把重点放在理解 ...
- 【深入浅出jQuery】源码浅析2--使用技巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- Android手势源码浅析-----手势绘制(GestureOverlayView)
Android手势源码浅析-----手势绘制(GestureOverlayView)
随机推荐
- C#获取QQ旋风的下载记录
/* * 用户:从前的我 * 日期:2015/8/26 */ using System; using System.IO; namespace GetXf { class Program { publ ...
- JavaScript禁止用户多次提交方法
[当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> & ...
- Python学习笔记4(函数与模块)
1.Python程序的结构 Python的程序由包(package).模块(module)和函数组成. 模块是处理一类问题的集合,由函数和类组成. 包是由一系列模块组成的集合.包是一个完成特定任务的工 ...
- (原)Windows下编译指纹识别的Rel_4.1.0库
网址:http://www.cnblogs.com/darkknightzh/p/4867372.html.未经允许,严禁转载. 没怎么用过linux,对于MSYS和MinGW也基本没用过,因而编译R ...
- shell script中的$*和$@
在shell script中,$*和$@都是获取所有的命令行参数,但是这两者在使用的过程中会有细微的差别,差别主要是在有没有使用双引号,即是直接使用$*,$@,还是使用"$*",& ...
- 关于url拼接传参数和利用view的字典传参数时,模板获取数据的方式问题
url = "{% url 'dashboard:internship-theme-stat' %}?teacher_name="+teacher_name+"& ...
- java中list、set和map 的区别
List按对象进入的顺序保存对象,不做排序或编辑操作.Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序--否则应该使用List).Map同样 ...
- Linux系统编程(8)—— 进程之进程控制函数fork
fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同,两个进程也可以做不同的事. 一个进程调用fork()函数后,系统先 ...
- bzoj1650 [Usaco2006 Dec]River Hopscotch 跳石子
Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...
- Best Time to Buy and Sell Stock III 解答
Question Say you have an array for which the ith element is the price of a given stock on day i. Des ...