html 资源异步,异步加载JS脚本

JavaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如JS脚本，CSS，图片，iframe等。

浏览器下载除JS外的资源时，会并行下载，以提高性能。但下载JS脚本时，会禁止并行下载(称为脚本阻塞Scripts Block Downloads)。浏览器遇到JS时，必须等JS下载，解析，执行完后，才能继续并行下载下一个资源。原因是JS可能会改变页面或改变JS间的依赖关系，例如A.js中用document.write改变页面，B.js依赖于A.js。因此要严格保证顺序，不能并行下载。

(你可以点击这里，试一下本篇中所有例子)

因此不推荐将JS放到

标签里，你可以点击例子页面试一下。浏览器遇到

这属于静态脚本元素，浏览器执行到这里发现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属性，最后将其插入到

中。

script标签被插入到页面的DOM树后，就会开始下载src属性指定的脚本。而且通过动态脚本元素下载脚本是异步的，不会阻塞页面的其他下载和处理过程，因此script标签插入

中也没问题。

当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属性，用于异步加载脚本：

浏览器解析到HTML里的该行script标签，发现指定为async，会异步下载解析执行脚本。

例子页面的DOM结构里由于script在img图片之前，如果你的浏览器支持async的话，就会异步加载脚本。此时DOM里已经有img元素了，所以脚本里能顺利取到img的src并弹框。

该方式可以跨域。缺点是HTML5里新增属性，如果你需要继续支持旧版本浏览器可能需要打些补丁。

Script defer

script标签里可以设置defer，表示延迟加载脚本：

浏览器解析到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，而非alert.js。需要新建一个alert.html，将alert.js内容内嵌进去。

该技术的缺点除了不能跨域外，还包括iframe的共通问题。例如iframe的开销比其他DOM元素高很多。iframe会阻塞onload事件，而我们通常希望onload能尽快触发，因为onload触发时浏览器会停止忙指示器，能让用户感觉快了一点。

直接写入HTML

简单粗暴无内涵，将外部脚本的内容拷贝粘贴进HTML：

function(...);

...

这个方法的优点是可以严格保证JS顺序，还能减少HTTP请求。缺点是不能享受不到浏览器缓存。由于缓存对站点来说如此的重要，因此不推荐这个方法。况且该方法会增大HTML体积，因此只有极少数情况下，例如网站首页非常重要的内容，且JS代码较少时，才会考虑将JS直接写入HTML里。

document.write Script

在IE中可以用document.write把script元素写入HTML可以实现并行下载脚本，但下载脚本时仍旧会对其他资源造成脚本阻塞：

document.write("

document.write("

该特性适用范围很窄，我只在IE9上确认过。基本不推荐。

忙指示器

浏览器在加载时有4种方式提示用户：标签页前的菊花转(见下图)，左下角显示”已连接到 xxxx”(见下图)，底部中央显示进度条，鼠标成漏斗状。后两者因为太丑，在现代浏览器中已被隐藏，老式浏览器比较明显。

上面介绍的异步方式中，通过script技术下载脚本会触发浏览器这些忙指示器。但XHR方式不会触发浏览器的忙指示器。你需要权衡哪些需要让用户知道正在下载，哪些不需要让用户知道。

异步处理外部脚本总结

对上面介绍的方法做一下总结。具有共通性的跨域，和忙指示器见下图：

通常来说你应该放弃document.write Script方式。只有在很少情况下才会选用直接写入HTML的方式。

如果资源需要跨域，你需要放弃XHR Eval，XHR Inject，Script in iframe方式

如果需要兼容旧式浏览器，你可能需要放弃Script async，Script defer

常规的方式加载外部脚本，因为有脚本阻塞问题，可能会出现白屏，页面卡等问题。程度视加载脚本耗时而定。用本篇介绍的方法来加载外部脚本可以大大改善用户体验。

异步处理行内脚本

直接写进HTML的JS代码虽然不存在下载的问题，但需要考虑执行速度。如果执行速度慢，同样会有脚本阻塞的问题。但相比外部脚本，处理行内脚本就简单多了。常见的方式如下：(按推荐度从高到低排列)

行内脚本移到HTML底部：不赘述。

异步执行行内脚本：耗时小用setTimeout，等价于移到了HTML底部。耗时多用window.onload。例如：

function doSomething() {…}

setTimeout(doSomething, 0);

如果行内代码执行的速度很快，像上面那样将setTimeout的时间设成0就行了。如果执行很耗时，为了逐步渲染，你可以用绑定到window.onload事件上：

function doSomething() {…}

window.onload = doSomething;

Script defer：defer属性同样适用于行内脚本，具体参照上面，不赘述。

总结

看到这里你可能会很疑惑，现在大型前端开发中加载JS，会用一些现成的加载工具，如AMD的requirejs，seajs， mass，oyejs等，它们既能异步下载，又能保证顺序，用起来又方便。知道这些有什么用呢？这就看得你的追求了，好比用jQuery能让新手很快速上手进行开发，但JavaScript基础不好，估计也只能用jQuery做点简单开发。理解了本篇，对你查看seajs等源码有好处，能让你对这些工具有更感性的认识。