高性能 JS 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 请求。例如：
<script type="text/javascript">
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”(参见第 9 章)或者类似的工具将初始化脚本缩
小到最小字节尺寸。
一旦页面初始化代码下载完成，你还可以使用 loadScript()函数加载页面所需的额外功能函数。
1.The YUI 3 approach（这里不做介绍）
2.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（这里不做介绍）
引用自高性能JS