LABjs学习(一)之无阻塞动态并行加载脚本文件以及管理执行顺序

什么是LABjs

LABjs是一个动态的脚本加载器,LABjs的定义特性是能够在浏览器允许的范围内以最快的速度并行加载所有JavaScript文件,但是如果文件之间存在依赖关系,则可以选择确保正确的执行顺序

总计来说就是:动态并行加载脚本文件以及管理加载脚本文件的执行顺序

使用方法

$LAB对象替代了<script>标签,然后.script()方法表示加载Javascript文件,不带参数的.wait()方法表示立即运行刚才加载的Javascript文件,带参数的.wait()方法也是立即运行刚才加载的Javascript文件,并在运行完毕后还运行参数中指定的函数。

LABjs鼓励链式操作,因此每个方法都会返回$LAB对象的引用,需要下载多个脚本文件,只需要链式调用$LAB.script()方法

这里需要注意的是,可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行,你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成不同的$LAB链,表示它们之间不存在相关关系。

注意:wait()不会影响并行下载,所有的文件都是并行下载,wait()决定哪个先执行

改写

   <script src="script1.js"></script>
  <script src="script2-a.js"></script>
  <script src="script2-b.js"></script>
  <script type="text/javascript">
    initScript1();
    initScript2();
  </script>
  <script src="script3.js"></script>
  <script type="text/javascript">
    initScript3();
  </script>

上面这段代码,将依次加载4个javascript文件:script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后,运行两个函数initScript1()和initScript2();加载完第四个文件后,再运行函数initScript3()。

下面,用LABjs对其进行改写:

  <script src="LAB.js"></script>
  <script type="text/javascript">
    $LAB
     .script("script1.js").wait()
     .script("script2-a.js")
     .script("script2-b.js")
     .wait(function(){
       initScript1();
       initScript2();
     })
     .script("script3.js")
     .wait(function(){
       initScript3();
     });
  </script>

实例1:

/**
*三个js文件之间不存在依赖,异步加载
**/
<script src="LAB.js"></script>
$LAB
.script("script1.js")
.script("script2.js")
.script("script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
});

实例2:

/**
*为加载的js文件指定类型
**/
<script src="LAB.js"></script>
$LAB
.script({ src: "script1.js", type: "text/javascript" })
.script("script2.js")
.script("script3.js")
.wait(function(){ // 等待所有script加载完再执行这个代码块
    script1Func();
    script2Func();
    script3Func();
});

实例3:

<script src="LAB.js"></script>
$LAB.script("script1.js","script2.js","script3.js")
.wait(function(){// 等待所有script加载完再执行这个代码块
      script1Func();
      script2Func();
      script3Func();
});

实例4:

<script src="LAB.js"></script>
$LAB.script(["script1.js","script2.js"],"script3.js")
.wait(function(){// 等待所有script加载完再执行这个代码块
      script1Func();
      script2Func();
      script3Func();
});

实例5:

<script src="LAB.js"></script>
$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 ,1、2、3都运行完才会运行4
.wait(function(){
    script4Func();
});

实例6:

<script src="LAB.js"></script>
$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:

<script src="LAB.js"></script>
$LAB.setOptions({AlwaysPreserveOrder:true})// 设置每个脚本之间等待
.script("script1.js")// script1, script2, script3, script4 互相依赖
.script("script2.js")// 并且并行下载后循序执行
.script("script3.js")
.script("script4.js")
.wait(function(){
      script4Func();
});

实例8:


<script src="LAB.js"></script>
$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();    

下载地址

参考

阮一峰:Javascript文件加载:LABjs和RequireJS

LABJS浅析

原文地址:https://www.cnblogs.com/kunmomo/p/12153492.html

时间: 2024-08-05 13:58:47

LABjs学习(一)之无阻塞动态并行加载脚本文件以及管理执行顺序的相关文章

JS 动态加载脚本 执行回调[transfer]

JS 动态加载脚本 执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发现

js的并行加载以及顺序执行

重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是异步并行加载的.这里所说的并行不仅仅指的是 js并行加载,也包括js和其他资源比如图片,iframe的加载.但是此种方式在Firefox的2.0 3.0 3.1版本和opera 9.63 下是可以顺序执行的.但是由于Kyle的提议,现代浏览器都可以通过对动态创建的script元素设置属性async=

JS 动态加载脚本 执行回调

JS 动态加载脚本  执行回调 关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解怎么在js中加载其它js文件并在加载完成后执行回调函数. 我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行. 经过对网络上资源的搜索,我发

并行加载与顺序执行

Javascript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,引用的具体实现方式和这些方式可能会带来的性能问题. 首先,引用脚本必须用到<script>标签,所以需要了解<script>标签的特性,引述书中作者原话: 当浏览器遇到(即内嵌)<script>标签时,当前浏览器无从获知Javascript是否会修改页面内容.因此,这时浏览器会停止处理页面,先执行Javascript代

无阻塞加载脚本

一个页面,从被请求访问,到用户可以看到页面.操作页面,到最后页面完全加载完毕,中间需要经历一个相当奇幻的过程,这个过程的速度被"web性能师"孜孜不倦.前赴后继的优化.本文讨论的是其中一个优化. 浏览器线程和阻塞 虽然大家耳熟能详的一句话是: JavaScript是单线程的. 但是: 浏览器当然不是单线程的. 浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询.监听用户事件. 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览

无阻塞加载脚本的方案

1.动态加载脚本 <script type="text/javascript"> function loadScript(url){ var script=document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); } loadScript("js/sid

JavaScript学习10:动态加载脚本和样式

我们在写Web页面的时候,需要引入很多的JavaScript脚本文件和CSS样式文件,尤其是在网站需求量很大的时候,脚本的需求量也随之变大,这样一来,网站的性能就会大打折扣,因此就出现了动态加载的概念,即在需要的时候才去加载对应的脚本和样式.下面我们就来看看如何实现动态加载.  动态脚本: 先来看一个动态加载js文件的代码示例: //动态加载JS var flag=false ; if(flag){ loadScript('browserdetect.js'); } function loadS

Extjs学习----------动态加载js文件(减轻浏览器的压力)

动态加载js文件可以减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/details/38538277 具体实现步骤: (1)建立dynamic.jsp文件 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String

无阻塞加载脚本,按序执行

通常加载页面的时候,对于组件是并行下载的,现代大部分浏览器对于Js同样也是支持并行下载,但是在脚本下载.解析并执行完毕之前,不会开始下载任何其他内容. 正常引入: 可以看出,在脚本下载完毕后的一段时间内(该时间在解析执行脚本),不会对其他组件进行下载,以下几种方案解决该问题. 1. XHR Eval加载脚本: 即使用ajax引入脚本,并通过eval对其执行. 代码: var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function