LABJS根据需要加载JavaScript文件

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页面里,通过<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大神的美好愿望,尚未有浏览器支持:/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小组接受并放入草案:/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的作者是不是没有想到这一点呢?

时间: 2024-11-16 14:47:51

LABJS根据需要加载JavaScript文件的相关文章

动态加载JavaScript文件的两种方法_javascript技巧

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

异步安全加载javascript文件的方法_javascript技巧

本文实例讲述了异步安全加载javascript文件的方法.分享给大家供大家参考.具体如下: 使用方法: (function() { __safeLoadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", function() { alert(jQuery); }); })(); JavaScript实现代码: window.__safeLoadScript = function(src, c

不发送HTTP Referer信息加载JavaScript文件

在 Web 开发中,我们经常会遇到跨域请求的问题.跨域的问题,解决方案有很多:代理请求.domain 设置.flash方式.jsonp方式.Access-Control-Allow-Origin.其中,jsonp 的方式最为通用,使用起来也比较简单:通过 JavaScript 回调的方式进行数据跨域传送. jsonp 方式解决跨域问题XHTML <script src="http://www.other-domain.cn/api?callback=callback">&l

LABJS按需动态加载js文件

  为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间;于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间 LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的

详谈LABJS按需动态加载js文件_javascript技巧

LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行顺序. 简单示例 $LAB .script("script1.js", "script2.js", "script3.js") .block(function(){ // wait for all to load

使用RequireJS库加载JavaScript模块的实例教程_javascript类库

js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕.且js的依赖关系必须通过script的顺序才能确保:而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一. requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法.变量的模块:requirejs也可以加载飞AMD标准的模块

javascript-Qt加载dll文件后在JavaScript中无法使用

问题描述 Qt加载dll文件后在JavaScript中无法使用 实现目的:在Qt加载dll文件,dl文件实现提示框功能,dll文件的类为Operator,加载后作用js的一个属性被js使用. 问题:在js中就不能成功调用,并提示: Uncaught exception at :/test.js:6: TypeError: Result of expression 'Operator.prompt' [undefined] is not a function. 尝试在main.cpp中调用这个类的

javascript加载XMLDOM文件判断是否加载成功

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="conte

javascript重新加载js文件三种方法

例1.重新加载js文件  代码如下 复制代码 function loadJs(file) {             var head = $("head").remove("script[role='reload']");             $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 'reload