为了提高页面的打开和加载速度,我们经常把 JS 文件放在页面的尾部,但是有些 JS 必须放在页面前面,这样就会增加页面的加载时间;于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个 JS 文件或者 CSS 渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行顺序。
简单示例
- $LAB
- .script("script1.js", "script2.js", "script3.js")
- .block(function(){
- // wait for all to load, then do something
- script1Func();
- script2Func();
- script3Func();
- });
介绍下 LABJS 的几个实例:
实例 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 页面里,通过
动态加载脚本的方式有很多,优缺点不一,此处不赘述,有兴趣的童鞋可以参见本文末尾的参考链接 :)。
LABjs 里主要使用了三种技巧,分别为 Script Element、XHR Injection 以及 Cache Trick
首先对这三种加载方式进行简单介绍,第四部分再分析 LABjs 源码实现里面对着三种方式分别的使用场景
Script Element(LABjs 默认采用加载方式)
最常见的脚本动态加载方式,优点很多,包括:1、实现简单 2、可跨域 3、不会阻塞其他资源的加载 等
Opera/Firefox(老版本)下:脚本执行的顺序与节点被插入页面的顺序一致
IE/Safari/Chrome 下:执行顺序无法得到保证
注意:
LABjs 里关于脚本加载采用方案的判断
忽略技术细节,通过一段伪代码来描述 LABjs 里面的实现,大致为:
首先判断是否对请求的脚本进行预加载(是否进行预加载的判断条件看伪代码注释);
如进行预加载,再判断浏览器是否支持真正的预加载;如支持真正的预加载,则预加载之;如否,判断请求的脚本是否跟当前页面同域,如实,采用 XHR Injection,如否,采用 Cache Trick;
如不进行预加载,判断浏览器支不支持 script 元素的 async 属性(见伪代码注释),如是,设置 async 属性,并请求脚本文件;如否,直接通过 script 元素加载脚本文件;
实际上,当你在页面创建一个 img 节点,并将其 src 指向一个脚本文件,在部分浏览器里同样能够起到文件预加载的作用,那么 LABjs 的作者是不是没有想到这一点呢?
来源: http://www.phperz.com/article/17/0302/271444.html