您的位置：首页 > Web前端 > JQuery

[原创]如何确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异

2013-06-24 11:32 781 查看

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 b) Mozilla script document c) Browser support for <script async=“true” />? d) HTML5 async specification
总的说来，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的源代码打包供大家下载测试。如果你有什么建议或意见，也欢迎光临我的技术博客，评论留念。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航