JavaScript优化篇7-Recommended Nonblocking Pattern

推荐的向页面加载大量JavaScript 的方法分为两个步骤：第一步，包含动态加载JavaScript 所需的代码，然后加载页面初始化所需的除JavaScript 之外的部分。这部分代码尽量小，可能只包含loadScript()函数，它下载和运行非常迅速，不会对页面造成很大干扰。当初始代码准备好之后，用它来加载其余的JavaScript。

例如：

<script type=”text/javascript” src=”loader.js”></script>

<script type=”text/javascript”>

loadScript(“the-rest.js”, function(){

Application.init();

});

</script>

将此代码放置在body 的关闭标签</body>之前。这样做有几点好处：首先，像前面讨论过的那样，这样做确保JavaScript 运行不会影响页面其他部分显示。其次，当第二部分JavaScript 文件完成下载，所有应用程序所必须的DOM 已经创建好了，并做好被访问的准备，避免使用额外的事件处理（例如window.onload）

来得知页面是否已经准备好了。

另一个选择是直接将loadScript()函数嵌入在页面中，这可以避免另一次HTTP 请求。例如：

function loadScript(url, callback){

var script = document.createElement (“script”)

script.type = “text/javascript”;

if (script.readyState){ //IE

script.onreadystatechange = function(){

if (script.readyState == “loaded” ||

script.readyState == “complete”){

script.onreadystatechange = null;

callback();

}

};

} else { //Others

script.onload = function(){

callback();

};

}

script.src = url;

document.getElementsByTagName_r(“head”)[0].appendChild(script);

}

loadScript(“the-rest.js”, function(){

Application.init();

});

</script>

如果你决定使用这种方法，建议你使用“YUI Compressor”或者类似的工具将初始化脚本缩小到最小字节尺寸。

一旦页面初始化代码下载完成，你还可以使用loadScript()函数加载页面所需的额外功能函数。

The YUI 3 approach

YUI 3 的核心设计理念为：用一个很小的初始代码，下载其余的功能代码。要在页面上使用YUI 3，首先包含YUI 的种子文件：

<script type=”text/javascript”

src=http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js></script>

此种子文件大约10KB（gzipped 压缩后6KB）包含从Yahoo! CDN 下载YUI 组件所需的足够功能。举例来说，如果你想使用DOM 功能，你可以指出它的名字（”dom”），传递给YUI 的use()函数，再提供一个回调函数，当代码准备好时这个回调函数将被调用：

YUI().use(“dom”, function(Y){

Y.DOM.addClass(docment.body, “loaded”);

});

这个例子创建了一个新的YUI 实例，然后调用use()函数。种子文件拥有关于文件名和依赖关系的所有

信息，所以指定“dom”实际上建立了一个由正确的依赖文件所组成的“联合句柄”URL，并创建一个动态脚本元素下载并执行这些文件。当所有代码可用时，回调函数被调用，YUI 实例将作为参数传入，使你可以立即使用新下载的功能。

The LazyLoad library

作为一个更通用的工具，Yahoo! Search 的Ryan Grove 创建了LazyLoad 库（参见

http://github.com/rgrove/lazyload/）。LazyLoad 是一个更强大的loadScript()函数。LazyLoad 精缩之后只有大约1.5KB（精缩，而不是用gzip 压缩的）。用法举例如下：

<script type=”text/javascript” src=”lazyload-min.js”></script>

<script type=”text/javascript”>

LazyLoad.js(“the-rest.js”, function(){

Application.init();

});

</script>

LazyLoad 还可以下载多个JavaScript 文件，并保证它们在所有浏览器上都能够按照正确的顺序执行。要加载多个JavaScript 文件，只要调用LazyLoad.js()函数并传递一个URL 队列给它：

<script type=”text/javascript” src=”lazyload-min.js”></script>

<script type=”text/javascript”>

LazyLoad.js([“first-file.js”, “the-rest.js”], function(){

Application.init();

});

</script>

即使这些文件是在一个非阻塞的方式下使用动态脚本加载，它建议应尽可能减少文件数量。每次下载仍然是一个单独的HTTP 请求，回调函数直到所有文件下载并执行完之后才会运行。

The LABjs library

另一个非阻塞JavaScript 加载库是LABjs（http://labjs.com/），Kyle Simpson 写的一个开源库，由SteveSouders 赞助。此库对加载过程进行更精细的控制，并尝试并行下载尽可能多的代码。LABjs 也相当小，只有4.50KB（精缩，而不是用gzip 压缩的），所以具有最小的页面代码尺寸。用法举例：

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>

$LAB.script()函数用于下载一个JavaScript 文件，$LAB.wait()函数用于指出一个函数，该函数等待文件下载完成并运行之后才会被调用。LABjs 鼓励链操作，每个函数返回一个指向$LAB 对象的引用。要下载多个JavaScript 文件，那么就链入另一个$LAB.script()调用，如下：

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“first-file.js”)

.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>

LABjs 的独特之处在于它能够管理依赖关系。一般来说<script>标签意味着每个文件下载（或按顺序，或并行，如前所述），然后按顺序执行。在某些情况下这非常必要，但有时未必。

LABjs 通过wait()函数允许你指定哪些文件应该等待其他文件。在前面的例子中，first-file.js 的代码不保证在the-rest.js 之前运行。为保证这一点，你必须在第一个script()函数之后添加一个wait()调用：

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“first-file.js”).wait()

.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>