本文探讨了使用jQuery动态加载跨域JavaScript文件时，在不同浏览器中的执行顺序问题。特别是针对jQuery1.4.4与1.5.1版本在Firefox上的表现差异进行了详细分析。
我们发现 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的源代码打包 供大家下载测试
扫一扫
1490
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
