JavaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等。
浏览器下载除JS外的资源时，会并行下载，以提高性能。但下载JS脚本时，会禁止并行下载（称为脚本阻塞Scripts Block Downloads）。浏览器遇到JS时，必须等JS下载，解析，执行完后，才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依赖关系，例如A.js中用document.write改变页面，B.js依赖于A.js。因此要严格保证顺序，不能并行下载。
（你可以点击这里，试一下本篇中所有例子）
因此不推荐将JS放到<head>标签里，你可以点击例子页面试一下。浏览器遇到<script>标签会下载，解析，执行完脚本后，才继续处理剩余的页面部分。而且浏览器在遇到<body>标签前是不会渲染页面的，因此例子中处理JS用了2s，页面会白屏2s。
为了避免白屏，通常的建议是将JS放到<body>标签底下，可以有最佳的用户体验，你可以点击例子页面试一下。如果你放到了<body>标签的上部，因为脚本阻塞，可能会影响用户体验。例子中位于<body>上部的JS耗时2s，因此位于JS下面的两张img图片，会等2s后才开始加载。
将JS放在<body>底下的建议没有错，几乎成了前端的普世规则。但对于追求极致用户体验的站点，或大型网站来说，这还不够。虽然JS脚本由于存在的依赖关系，需要按顺序执行，但并不需要按顺序下载。本篇就介绍一下让JS与其他组件并行下载的方法，即异步处理脚本。
- 异步处理外部脚本：（按推荐度从高到低排列）
- Dynamic Script Element
- Script async
- Script defer
- XHR Eval
- XHR Inject
- Script in iframe
- 直接写入HTML
- document.write Script
- 忙指示器
- 异步处理外部脚本总结
- 异步处理行内脚本
Dynamic Script Element
通常我们加载JS脚本会在HTML里：
<script type="text/javascript" src="A.js"></script>
这属于静态脚本元素，浏览器执行到这里发现script元素，会按上面所说的，下载解析执行脚本，同时阻塞其他资源文件的下载。而动态脚本元素如下：
var script = document.createElement('script'); //创建script标签
script.type = "text/javascript";
script.src = "A.js";
document.getElementsByTagName('head')[0].appendChild(script); //塞进页面
先用document.createElement(‘script’)生成一个script标签，再设置它的src属性，最后将其插入到<head>中。
script标签被插入到页面的DOM树后，就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的，不会阻塞页面的其他下载和处理过程，因此script标签插入<head>中也没问题。
当JS下载完毕后，就会立即执行。如果多个JS间有依赖关系，一下载完马上执行可能会出现error。因此通常来说你应该将有依赖关系的JS合并成一个文件，虽然合并后JS文件会变大，但由于是异步下载，你几乎不会有什么损失。
如果实在不方便将有依赖关系的文件合并。你需要自己指定先后顺序，通过监听load事件（IE是onreadystatechange）来确保依次加载脚本：
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("head")[0].appendChild(script);
}
//严格确保A->B->C，依次下载脚本文件
loadScript("A-delay.js", function(){
loadScript("B-delay.js", function(){
loadScript("C-delay.js", function(){
console.log("All files are loaded!");
});
});
});
该技术不但简单，而且通用，且可以跨域，应该成为你的首选。
Script async
HTML5里为script标签里新增了async属性，用于异步加载脚本：
<script type="text/javascript" src="alert.js" async="async"></script>
浏览器解析到HTML里的该行script标签，发现指定为async，会异步下载解析执行脚本。
例子页面的DOM结构里由于script在img图片之前，如果你的浏览器支持async的话，就会异步加载脚本。此时DOM里已经有img元素了，所以脚本里能顺利取到img的src并弹框。
该方式可以跨域。缺点是HTML5里新增属性，如果你需要继续支持旧版本浏览器可能需要打些补丁。
Script defer
script标签里可以设置defer，表示延迟加载脚本：
<script type="text/javascript" src="alert.js" defer="defer"></script>
浏览器解析到HTML里的该行script标签，发现指定为defer，会暂缓下载解析执行脚本。而是等到页面加载完毕后，才加载脚本（更精确地说，是在DOM树构建完成后，在window.onload触发前，加载defer的脚本）。
例子页面的DOM结构里由于script在img图片之前，如果你的浏览器支持defer的话，就会延迟到页面加载完后才下载脚本。此时DOM里已经有img元素了，所以脚本里能顺利取到img的src并弹框。
该方式可以跨域。缺点是虽然不像async属于HTML5的新属性，但defer仍旧有旧版本浏览器不支持。（根据w3cschool的说法，只有IE浏览器支持defer，试验下来其他浏览器新版均已支持defer，所以w3cschool的说法已经过时）
XHR Eval
通过传统的Ajax方式，用XMLHttpRequest（低版本IE中是ActiveXObject）异步获得脚本内容后，通过eval执行脚本：
function createRequest() {
try {
request = new XMLHttpRequest();
} catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (otherMS) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = null;
}
}
}
return request;
}
var request = createRequest(); //获得一个请求对象
request.onreadystatechange = function() {
if (request.readyState == 4) {
if ((request.status >= 200 && request.status < 300) || request.status == 304) {
eval(request.responseText);
}
}
};
request.open("GET", "alert.js", true);
request.send(null);
这种Ajax方式能让浏览器异步加载脚本，不会阻塞其他资源的下载。缺点是不支持跨域，因此脚本和页面必须在同一个域。
例子页面的DOM结构里由于脚本在img图片之前，如果不是异步加载脚本的话，是无法alert出图片的URL地址的。
另外应该会有人表示eval有性能上的问题，理论上确实如此，但还是得以实测为准，可能需要你在几ms的性能问题和异步下载带来的优势之间做出权衡。还有人表示eval有安全隐患，理论上确实如此。但因为不能跨域，通常站点里的脚本你应该有绝对的控制权。如果JS里不涉及input元素，我不认为会出现什么安全隐患…当然如果你对eval深恶痛绝，也可以换成XHR Inject方式。
XHR Inject
和XHR Eval的区别是：用传统Ajax方式下载脚本后，不再通过eval，而是动态创建script元素后塞进页面。将XHR Eval里的eval部分替换成下面代码即可：
var script = document.createElement("script");
script.type = "text/javascript";
script.text = request.responseText;
document.body.appendChild(script);
动态创建的script元素将被塞到body底部，塞进去之后就会开始执行脚本。优缺点基本同XHR Eval，同样不能跨越。虽然避免了eval性能和安全的问题，但效率可能比XHR Eval稍微低一点。
Script in iframe
利用iframe可以和其他组件并行下载的特性，将脚本嵌入到iframe里实现异步加载。缺点同样是不能跨越，脚本和页面必须在同一个域中。
<iframe src='alert.html' width=0 height=0 frameborder=0 id='iframe1'></iframe>
创建iframe，注意src里是alert.html，而非alert.js。需要新建一个alert.html，将alert.js内容内嵌进去。
该技术的缺点除了不能跨域外，还包括iframe的共通问题。例如iframe的开销比其他DOM元素高很多。iframe会阻塞onload事件，而我们通常希望onload能尽快触发，因为onload触发时浏览器会停止忙指示器，能让用户感觉快了一点。
直接写入HTML
简单粗暴无内涵，将外部脚本的内容拷贝粘贴进HTML：
<script type="text/javascript">
function(...);
...
</script>
这个方法的优点是可以严格保证JS顺序，还能减少HTTP请求。缺点是不能享受不到浏览器缓存。由于缓存对站点来说如此的重要，因此不推荐这个方法。况且该方法会增大HTML体积，因此只有极少数情况下，例如网站首页非常重要的内容，且JS代码较少时，才会考虑将JS直接写入HTML里。
document.write Script
在IE中可以用document.write把script元素写入HTML可以实现并行下载脚本，但下载脚本时仍旧会对其他资源造成脚本阻塞：
document.write("<script type=\"text/javascript\" src=\"A-delay.js\"><\/script>");
document.write("<script type=\"text/javascript\" src=\"B-delay.js\"><\/script>");
该特性适用范围很窄，我只在IE9上确认过。基本不推荐。
忙指示器
浏览器在加载时有4种方式提示用户：标签页前的菊花转（见下图），左下角显示”已连接到 xxxx”（见下图），底部中央显示进度条，鼠标成漏斗状。后两者因为太丑，在现代浏览器中已被隐藏，老式浏览器比较明显。
上面介绍的异步方式中，通过script技术下载脚本会触发浏览器这些忙指示器。但XHR方式不会触发浏览器的忙指示器。你需要权衡哪些需要让用户知道正在下载，哪些不需要让用户知道。
异步处理外部脚本总结
对上面介绍的方法做一下总结。具有共通性的跨域，和忙指示器见下图：
通常来说你应该放弃document.write Script方式。只有在很少情况下才会选用直接写入HTML的方式。
如果资源需要跨域，你需要放弃XHR Eval，XHR Inject，Script in iframe方式
如果需要兼容旧式浏览器，你可能需要放弃Script async，Script defer
常规的<script type=”text/javascript” src=”xxx.js”></script>方式加载外部脚本，因为有脚本阻塞问题，可能会出现白屏，页面卡等问题。程度视加载脚本耗时而定。用本篇介绍的方法来加载外部脚本可以大大改善用户体验。
异步处理行内脚本
直接写进HTML的JS代码虽然不存在下载的问题，但需要考虑执行速度。如果执行速度慢，同样会有脚本阻塞的问题。但相比外部脚本，处理行内脚本就简单多了。常见的方式如下：（按推荐度从高到低排列）
行内脚本移到HTML底部：不赘述。
异步执行行内脚本：耗时小用setTimeout，等价于移到了HTML底部。耗时多用window.onload。例如：
<script type="text/javascript">
function doSomething() {…}
setTimeout(doSomething, 0);
</script>
如果行内代码执行的速度很快，像上面那样将setTimeout的时间设成0就行了。如果执行很耗时，为了逐步渲染，你可以用绑定到window.onload事件上：
<script type="text/javascript">
function doSomething() {…}
window.onload = doSomething;
</script>
Script defer：defer属性同样适用于行内脚本，具体参照上面，不赘述。
总结
看到这里你可能会很疑惑，现在大型前端开发中加载JS，会用一些现成的加载工具，如AMD的requirejs，seajs， mass，oyejs等，它们既能异步下载，又能保证顺序，用起来又方便。知道这些有什么用呢？这就看得你的追求了，好比用jQuery能让新手很快速上手进行开发，但JavaScript基础不好，估计也只能用jQuery做点简单开发。理解了本篇，对你查看seajs等源码有好处，能让你对这些工具有更感性的认识。
