1. 引言
在上一篇文章《如何确保JavaScript的执行顺序 - 之实战篇》中，我们发现jQuery.html函数在动态加载跨域JavaScript时，在Firefox和Opera中可以按照引入顺序执行，而在IE，Chrome和Safari中都不能确保执行顺序。
经过分析，我们发现jQuery.html在处理跨域静态JS文件时，并非采用的同步AJAX（也存在同源策略的限制），而是在head中添加script标签来完成的。
我们先来简单回顾下HTML源代码（test2_1.htm）：
<html>
<head>
<title></title>
<script src="js/jquery-1.4.4.js" type="text/javascript"></script>
<script>
$(function(){
$('#container').html('<script src="http://test1.sanshi.me/jsorder/service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>');
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
在实际测试中，我发现如果使用jQuery1.5.1，那么得到的结果和使用jQuery1.4.4有些不同，请看下表：
|
|
test2_1.htm（jquery-1.4.4.js） 通过jQuery.html动态加载跨域JavaScript文件 |
test2_2.htm（jquery-1.5.1.js） 通过jQuery.html动态加载跨域JavaScript文件 |
|
Firefox 3.6 |
|
|
|
IE 8 |
|
|
|
Chrome 10 |
|
|
|
Safari 4 |
|
|
|
Opera 11 |
|
|
2. jQuery1.5.1/1.4.4在Firefox上不一致行为
从上表我们明显看出区别，jQuery1.5.1和1.4.4在处理动态加载跨域JS文件时，只在Firefox上的行为不一致，这是为什么呢？
深入代码，经过调试我们把焦点放在jQuery1.4.4的第5859行，以及jQuery1.5.1的第7135行：
从上面代码中，我们能看到的一个明显区别是在jQuery1.5.1的第7149行多了这么一行代码：
script.async = “async”;
为script标签添加一个名和值都为async的属性，这是啥情况？Google之。。。。。。
3. script标签的async属性
相关文档：
a) Script async, Raindrop and Firefox 3.6
c) Browser support for <script async=“true” />?
总的说来，async是HTML5中为script标签定义的属性，目前只有Firefox3.6以上版本的浏览器才支持。
4. script标签的async和defer属性的区别
从上面的W3C的官方描述中，我们有如下结论：
1. async属性和defer属性都是用来标识脚本的执行方式。
2. 对于内联JavaScript（没有src属性），不能指定async和defer属性
3. 设置async，不设置defer。脚本将会异步执行，也就是在脚本下载完成后立即执行。
4. 不设置async，设置defer。脚本将会在页面DOM解析完毕后执行。
5. 两个都不设置。脚本的下载和执行是阻塞模式，将会阻塞DOM树的继续渲染。
目前，据我所知：Firefox3.6中script标签支持async，不支持defer；而IE下，script标签支持defer而不支持async属性。
其实上面已经提到了async和defer的一个重要区别。async标识异步执行（也就是说执行时可能页面的DOM树还没有解析完成），而defer是在页面的DOM树解析完毕后执行。defer的这种特性和我们把JavaScript脚本放在页面的最底部的效果其实是一致的。
这点在Yahoo的“Best Practices for Speeding Up Your Web Site”的“Put Scripts at the Bottom”一节有详细的描述：
5. 后记
至此，这个系列的文章全部完成。我把全部DEMO的源代码打包供大家下载测试。如果你有什么建议或意见，也欢迎光临我的技术博客，评论留念。