Nonblocking Scripts 非阻塞脚本
JavaScript 倾向于阻塞浏览器某些处理过程，如 HTTP 请求和界面刷新，这是开发者面临的最显著的性
能问题。保持 JavaScript 文件短小，并限制 HTTP 请求的数量，只是创建反应迅速的网页应用的第一步。
一个应用程序所包含的功能越多，所需要的 JavaScript 代码就越大，保持源码短小并不总是一种选择。尽
管下载一个大 JavaScript 文件只产生一次 HTTP 请求，却会锁定浏览器一大段时间。为避开这种情况，你
需要向页面中逐步添加 JavaScript，某种程度上说不会阻塞浏览器。
非阻塞脚本的秘密在于，等页面完成加载之后，再加载 JavaScript 源码。从技术角度讲，这意味着在
window 的 load 事件发出之后开始下载代码。有几种方法可以实现这种效果。
这里着重说一下Dynamic Script Elements 动态脚本元素
文档对象模型（DOM）允许你使用 JavaScript 动态创建 HTML 的几乎全部文档内容。其根本在于，<script>
元素与页面其他元素没有什么不同：引用变量可以通过 DOM 进行检索，可以从文档中移动、删除，也可
以被创建。一个新的<script>元素可以非常容易地通过标准 DOM 函数创建：
var script = document.createElement ("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementsByTagName_r("head")[0].appendChild(script);
新的<script>元素加载 file1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：
无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。你甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）
微软文档上说，在<script>元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪
些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个
readyState 值所表示的最终状态并不一致，有时<script>元素会得到“loader”却从不出现“complete”，但另外
一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在 readystatechange 事件中检查这两种状
态，并且当其中一种状态出现时，删除 readystatechange 事件句柄（保证事件不会被处理两次）：
大多数情况下，你希望调用一个函数就可以实现 JavaScript 文件的动态加载。下面的函数封装了标准实
现和 IE 实现所需的功能：
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);
}
此函数接收两个参数：JavaScript 文件的 URL，和一个当 JavaScript 接收完成时触发的回调函数。属性
检查用于决定监视哪种事件。最后一步，设置 src 属性，并将<script>元素添加至页面。此 loadScript()函数
使用方法如下：
loadScript("file1.js", function(){
alert("File is loaded!");
});
你可以在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏
览器之中，只有 Firefox 和 Opera 保证脚本按照你指定的顺序执行。其他浏览器将按照服务器返回它们的次
序下载并运行不同的代码文件。你可以将下载操作串联在一起以保证他们的次序，如下：
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
此代码等待 file1.js 可用之后才开始加载 file2.js，等 file2.js 可用之后才开始加载 file3.js。虽然此方法可
行，但如果要下载和执行的文件很多，还是有些麻烦。
如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可
以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。
动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。
引用自高性能JS
2269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
