日期:2014-05-16  浏览次数:20325 次

异步加载js文件

一般我们加载 Javascript 文件都是使用<script>标签。

  就像下面这样:

<script type="text/javascript" src="zbxtools.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 事件中指定的回调函数对它无效。

那么我们如何办了?幸亏有大师写的开源加载组件!

外部函数库 LABjs 、SeaJS 和 RequireJS,可以帮助我们更有效地管理 Javascript 加载

LABjs

LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行。LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化。LABjs 是一个文件加载器。

RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然。
模块加载器一般可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,也可以达成 LABjs 的性能优化目的。

?

?