传统上,加载Javascript文件都是使用<script>标签。

就像下面这样:

  <script type="text/javascript" src="example.js"></script>

<script>标签很方便,只要加入网页,浏览器就会读取并运行。但是,它存在一些严重的缺陷。

  (1)严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小的文件必须放在最前面,依赖性最大的文件必须放在最后面,否则代码会报错。

  (2)性能问题。浏览器采用"同步模式"加载<script>标签,也就是说,页面会"堵塞"(blocking),等待javascript文件加载完成,然后再运行后面的HTML代码。当存在多个<script>标签时,浏览器无法同时读取,必须读取完一个再去读取另一个,造成读取时间大大延长,页面响应缓慢。

为了解决这些问题,可以使用DOM方法,动态加载Javascript文件。

  function loadScript(url){

    var script = document.createElement("script");

    script.type = "text/javascript";

    script.src = url;

    document.body.appendChild(script);

  }

这样做的原理是,浏览器即时创造出一个<script>标签,然后"异步"读取Javascript文件。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

外部函数库LABjsRequireJS,可以帮助我们更有效地管理Javascript加载。

下面根据ScriptJunkie的文章,举一个最简单的例子,来说明这两个函数库的基本用法。更高级的用法,请参阅它们的文档。

  <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>

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

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

接下来是requireJS的改写:

  <script src="require.js"></script>

  <script type="text/javascript">

    require([

      "script1.js",
      "script2-a.js",
      "script2-b.js",
      "script3.js"

     ],

     function(){

      initScript1();
      initScript2();
      initScript3();

     }

    );

  </script>

require()接受两个参数,第一个数组表示所要加载的Javascript文件,第二个是加载完成后所要运行的回调函数。原生的require()不支持按次序加载,所以四个Javascript文件到底先加载哪个,无法事前知道,require()只保证这四个文件全部加载完成之后,才会运行所指定的回调函数。

如果按次序加载对你很重要,你可以使用官方提供的order插件

(完)

文档信息

Javascript文件加载:LABjs和RequireJS的更多相关文章

  1. 高性能javascript 文件加载阻塞

    高性能javascript   javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题. 脚本位置和加载顺序:如果将脚本放在head内,那么再脚本执行完 ...

  2. js文件加载太慢,JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

  3. JavaScript文件加载器LABjs API详解

    在<高性能JavaScript>一书中提到了LABjs这个用来加载JavaScript文件的类库,LABjs是Loading And Blocking JavaScript的缩写,顾名思义 ...

  4. javascript文件加载模式与加载方法

    加载方式 形象图像化方法,见 http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html 1. script标签, ...

  5. Javascript的加载

    最新博客站点:欢迎来访 1. 浏览器加载     (1) 同步加载 在网页中,浏览器加载js文件的方式是通过<script>标签.如下所示: //内嵌脚本 <script type= ...

  6. RequireJS 是一个JavaScript模块加载器

    RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...

  7. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  8. 关于javascript模块加载技术的一些思考

    前不久有个网友问我在前端使用requireJs和seajs的问题,我当时问他你们公司以前有没有自己编写的javascript库,或者javascript框架,他的回答是什么都没有,他只是听说像requ ...

  9. Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

随机推荐

  1. python 代码格式

    python 代码格式 Python对代码的缩进要求非常严格,如果不采用合理的代码缩进,将抛出SyntaxError异常 Python语句中一般以新行作为为语句的结束符.但是我们可以使用斜杠( )将一 ...

  2. json-gson 解析泛型及解析null

    参考://public static class paraJson {public class paraJson{ static Gson gson = new GsonBuilder().regis ...

  3. 爬虫学习笔记(二)http请求详解

    上篇博客里面写了,爬虫就是发http请求(浏览器里面打开发送的都是http请求),然后获取到response,咱们再从response里面找到想要的数据,存储到本地. 咱们本章就来说一下什么是http ...

  4. C++面向对象程序设计_Part1

    目录 C++历史 C++的组成 C++ 与 C 的数据和函数区别 基于对象与面向对象的区别 C++类的两个经典分类 头文件防卫式声明 头文件的布局 类的声明 类模板简介 内联(inline)函数 访问 ...

  5. 终极CRUD-3-用Jackson解析json

    目录 1 jackson json基本介绍和使用 2 jackson 常用的注解 2.1@JsonProperty 2.2 @JsonIgnore 2.3 @JsonIgnoreProperties ...

  6. Swift 基础部分(建议掌握OC字符串知识的翻阅)

    更新说明: Swift 目前已经发布到4.0版本了,以前写的这整个Swift学习系列的文章,有很多的不足之处,我会重新整理整个系列文章,也是相当于重新复习一遍Swift,后面系列文章的改动之处全都会做 ...

  7. 方程式组织EQUATION DRUG平台解析(提纲) —方程式组织系列分析报告之四

    https://www.bleepingcomputer.com/news/security/shadow-brokers-release-new-files-revealing-windows-ex ...

  8. wireshark学习笔记

    之前写过一篇博客:用 Fiddler 来调试HTTP,HTTPS. 这篇文章介绍另一个好用的抓包工具wireshark, 用来获取网络数据封包,包括http,TCP,UDP,等网络协议包. 记得大学的 ...

  9. django发送邮件配置

    配置如下,settings中配置: EMAIL_HOST = 'smtp.163.com' EMAIL_PORT = '25' EMAIL_HOST_USER = 'contact108@163.co ...

  10. 24. Spring Boot环境变量读取和属性对象的绑定【从零开始学Spring Boot】

    转:http://blog.csdn.net/linxingliang/article/details/52069509 凡是被spring管理的类,实现接口EnvironmentAware 重写方法 ...