目前业界商用的JS文件加载器有LABjs,Require.js,Sea.js。后两者同时又是模块加载器,很多网站/软件并不是按照AMD/CMD规范来开发的,只有LAB.js在大部分网站/软件上可以即插即用,下面分析一下LAB.js。

LAB.js即loading and blocking,并行的加载脚本文件,同时同步的等待执行。

实例:

$LAB.setGlobalDefaults({Debug:true}) //打开调试
$LAB//第一个执行链.script('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js').script('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')//第二个执行链.wait(function(){// console.log(window.$)// console.log(window._)
    })//第三个执行链.script('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js').script('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')//第四个执行链.wait(function(){// console.log(plugin1Function)// console.log(plugin2Function)
    })//第五个执行链.script('./module1.js').script('./module2.js')//第六个执行链.wait(function(){// console.log(module1Function)// console.log(module2Function)})

调试信息跟踪分析:

//这三个执行是并行加载完以后,执行的3个wait操作
驱动执行的函数advance_exec_cursor, chain length:2  exec_cursor:0 LAB.js:46
驱动执行的函数advance_exec_cursor, chain length:4  exec_cursor:0 LAB.js:46
驱动执行的函数advance_exec_cursor, chain length:6  exec_cursor:0 LAB.js:46
//因为request_script函数中setTimeout(f,0),所以加载会滞后于wait操作
start script load (ordered async): http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js LAB.js:46
start script load (ordered async): http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js LAB.js:46
start script load (ordered async): http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js LAB.js:46
start script load (ordered async): http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js LAB.js:46
start script load (ordered async): file:///D:/Users/sj_yu/Desktop/work/20140408/LABjs/./module1.js LAB.js:46
start script load (ordered async): file:///D:/Users/sj_yu/Desktop/work/20140408/LABjs/./module2.js LAB.js:46
script execution finished: http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js LAB.js:46
script execution finished: http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js LAB.js:46
//按顺序执行完第一组执行链,也就是jquery和lodash,执行完JS后,调用advance_exec_cursor来探测执行游标是否需要移动
驱动执行的函数advance_exec_cursor, chain length:6  exec_cursor:0 LAB.js:46
//执行第二组执行链
$LAB.wait() executing: function (){// console.log(window.$)// console.log(window._)} LAB.js:46
//执行第三组执行链
script execution finished: http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js LAB.js:46
script execution finished: http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js LAB.js:46
//执行完第三组后,触发advance_exec_cursor
驱动执行的函数advance_exec_cursor, chain length:6  exec_cursor:2 LAB.js:46
//第四组执行链
$LAB.wait() executing: function (){// console.log(plugin1Function)// console.log(plugin2Function)} LAB.js:46
//第五组执行链
script execution finished: file:///D:/Users/sj_yu/Desktop/work/20140408/LABjs/./module1.js LAB.js:46
script execution finished: file:///D:/Users/sj_yu/Desktop/work/20140408/LABjs/./module2.js LAB.js:46
驱动执行的函数advance_exec_cursor, chain length:6  exec_cursor:4 LAB.js:46
//执行第六组执行链
$LAB.wait() executing: function (){// console.log(module1Function)// console.log(module2Function)} 

LAB.js关键代码分析:

//核心代码
(function(global){function create_sandbox() {//加载脚本,用到的方式有document.createElement('script'),xhrfunction do_script() {//脚本加载if(需要预加载) {if(是否默认支持预加载) {if(是否支持preload属性) {script.preload = true;} else {script.onreadystatechage = function() {if (script.readyState == "loaded") onload();}}script.src = src;} else if(是否用XHR方式) {new XMLHttpRequest();} else {script.type = "text/cache-script";create_script_load_listener();script.src = src;}} else if(可以异步加载) {script.async = false; //强制同步执行
                create_script_load_listener();script.src = src;} else {create_script_load_listener();script.src = src;}}//创建执行链function create_chain() {var chain = [];//执行链//执行完JS调用该函数function chain_script_executed() {advance_exec_cursor();}//主动执行每个执行链function advance_exec_cursor() {while(执行游标 < chain.length) {if(执行链是wait中的函数) {执行wait函数} else if(该执行链还没执行完) {} 游标++;}if (游标 == chain.length) {执行停止}}//执行链apivar chainedAPI = {script: function() {do_script();return chainedAPI;//支持链式调用
                },wait: function() {if(arguments.length > 0) {chain.push(arguments)}advance_exec_cursor();return chainedAPI;//支持链式调用
                }}return {script:chainedAPI.script, wait:chainedAPI.wait};} //end of create_chain//整个$LAB的接口var instanceAPI = {script:function(){return create_chain().script.apply(null,arguments);},wait:function(){return create_chain().wait.apply(null,arguments);}};return instanceAPI;} // end of create_sandbox//create_sandbox()返回 instanceAPI,包含script,wait等接口global.$LAB = create_sandbox();
})(this);

总结:

优点:LABjs的接口设计非常轻,api很清晰,现有项目可以快速上手,大幅改进页面性能。相对于多个JS文件压缩到一个JS文件,又有不阻塞图片,css加载和模块化的优势。

缺点:目前没有靠谱的grunt插件,打包困难。

与Require.js和Sea.js的比较请参考:

http://www.zhihu.com/question/20342350

DailyJS对LABjs的解析:

http://dailyjs.com/2011/08/15/code-review/

转载于:https://www.cnblogs.com/aotoYu/p/3653003.html

LABjs使用与分析相关推荐

  1. JS异步加载库LABjs简易说明

    为什么80%的码农都做不了架构师?>>>    一.关于LABjs的简单介绍 作者:Kyle Simpson 作用:动态并行加载脚本文件 以及 管理加载脚本文件的执行顺序 官网:ht ...

  2. 【Golang源码分析】Go Web常用程序包gorilla/mux的使用与源码简析

    目录[阅读时间:约10分钟] 一.概述 二.对比: gorilla/mux与net/http DefaultServeMux 三.简单使用 四.源码简析 1.NewRouter函数 2.HandleF ...

  3. 2022-2028年中国自动驾驶系统行业现状调研分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国自动驾驶系统行业市场行业相关概述.中国自 ...

  4. 2022-2028年中国阻尼涂料市场研究及前瞻分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国阻尼涂料行业市场行业相关概述.中国阻尼涂 ...

  5. 2021-2028年中国阻燃装饰行业市场需求与投资规划分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国阻燃装饰行业市场行业相关概述.中国阻燃装 ...

  6. 2022-2028年全球与中国漂白吸水棉市场研究及前瞻分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了全球与中国漂白吸水棉行业市场行业相关概述.全 ...

  7. 2022-2028年全球与中国青苔清洗剂市场研究及前瞻分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了全球与中国青苔清洗剂行业市场行业相关概述.全 ...

  8. 2022-2028年全球与中国氢碘化物市场智研瞻分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了全球与中国氢碘化物行业市场行业相关概述.全球 ...

  9. 2022-2028年全球与中国人字拖市场研究及前瞻分析报告

    [报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了全球与中国人字拖行业市场行业相关概述.全球与 ...

最新文章

  1. 【转】在SQL Server中通过SQL语句实现分页查询
  2. coreldraw水涟漪怎么做_排骨不论怎么做,都“别先焯水”,记住这2点,排骨鲜嫩无腥味!...
  3. 改头换面 OpenSSL将改用新型许可证
  4. hadoop启动碰到java.net.UnknownHostException
  5. dart 替代java_Dart与Java的语法区别
  6. qml 时间控件_Qt编写自定义控件54-时钟仪表盘
  7. 打工的人面对老板是没有溢价权的
  8. 【NOIP2007】【Luogu1093】奖学金
  9. Oracle VM VirtualBox 随系统自动启动虚拟机的方法
  10. Android自定义View【实战教程】1⃣️----attrs.xml详解
  11. ThreadLocal对象使用过程中容易陷入的坑
  12. 在某个文件夹中打开 cmd黑窗口
  13. RHEL4-VNC服务(二)vnc服务器的配置
  14. 更改google桌面搜索的索引文件位置
  15. ip okhttp 设置_okhttp3及httpclient中的代理设置
  16. Excel从文本中提取数值
  17. “HEAP:Invalid Address specified to RtlValidateHeap( 000D0000, 019FEF18 )错误
  18. Proteus电路图绘制与CubeMX生成框架下填充Keil 5代码的联调仿真
  19. 惠普暗影精灵命令中心linux,暗影精灵2成功装上Sierra 12.5正式版
  20. 第五章:Sharding-JDBC 自定义分片算法

热门文章

  1. 如何安装Ruby和RubyGems
  2. 什么是视觉动力 ​——工业设计与视觉动力
  3. 一阶系统的时域和频域分析
  4. 一个汉字在不同的字符集中所占的长度
  5. Python -- 网络编程
  6. 蓝桥杯JAVA-7.集合(容器)在竞赛中的使用
  7. Revit二次开发-CurveLoop的闭合处理
  8. 小猪o2o生活通系统安装后空白页面是什么原因怎么解决?
  9. FreeRadius数据表详解
  10. html纵向表头,HTML table固定表头