1. 引言
在上一篇文章《》中,我们发现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)
b)
c)
d)
总的说来,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的“”的“Put Scripts at the Bottom”一节有详细的描述:
5. 后记
至此,这个系列的文章全部完成。我把全部供大家下载测试。如果你有什么建议或意见,也欢迎光临我的,评论留念。