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

喜欢ヅ旅行 2022-05-15 05:08 46阅读 0赞

我们发现 jQuery.html函数在动态加载跨域 JavaScript时，在 Firefox和 Opera中可以按照引入顺序执行，而在 IE， Chrome和 Safari中都不能确保执行顺序。

经过分析，我们发现 jQuery.html在处理跨域静态 JS文件时，并非采用的同步 AJAX（也存在同源策略的限制），而是在 head中添加 script标签来完成的。

我们先来简单回顾下 HTML源代码（ test2\_1.htm）：

<html>

<head>

$(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>

</body>

</html>

在实际测试中，我发现如果使用 jQuery1.5.1，那么得到的结果和使用 jQuery1.4.4有些不同，请看下表：

<table style="width:415.6pt;margin-left:10.5pt;border-collapse:collapse;border:medium none;"> 
 <tbody> 
  <tr> 
   <td style="width:48.15pt;"> <p>&nbsp;</p> </td> 
   <td> <p>test2_1.htm（ <strong>jquery-1.4.4.js</strong> ） </p> <p>通过 jQuery.html动态加载跨域 JavaScript文件 </p> </td> 
   <td> <p>test2_2.htm（ <strong>jquery-1.5.1.js</strong> ） </p> <p>通过 jQuery.html动态加载跨域 JavaScript文件 </p> </td> 
  </tr> 
  <tr> 
   <td> <p>Firefox 3.6 </p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image002.jpg" alt="" width="218" height="68"></p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image004.jpg" alt="" width="236" height="74"></p> </td> 
  </tr> 
  <tr> 
   <td> <p>IE 8</p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image005.gif" alt="" width="134" height="114"></p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image005.gif" alt="" width="134" height="114"></p> </td> 
  </tr> 
  <tr> 
   <td> <p>Chrome 10 </p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image007.jpg" alt="" width="231" height="70"></p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image008.jpg" alt="" width="231" height="70"></p> </td> 
  </tr> 
  <tr> 
   <td> <p>Safari 4 </p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image010.jpg" alt="" width="231" height="86"></p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image010.jpg" alt="" width="231" height="86"></p> </td> 
  </tr> 
  <tr> 
   <td> <p>Opera 11 </p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image012.jpg" alt="" width="227" height="97"></p> </td> 
   <td> <p><img src="http://sanshi.me/articles/jsorder/jsorder4.files/image013.jpg" alt="" width="227" height="97"></p> </td> 
  </tr> 
 </tbody> 
</table>

## 2.       jQuery1.5.1/1.4.4在 Firefox上不一致行为 ##

从上表我们明显看出区别， jQuery1.5.1和 1.4.4在处理动态加载跨域 JS文件时，只在 Firefox上的行为不一致，这是为什么呢？

深入代码，经过调试我们把焦点放在 jQuery1.4.4的第 5859行，以及 jQuery1.5.1的第 7135行：

![image015.gif][]

![image017.gif][]

从上面代码中，我们能看到的一个明显区别是在 jQuery1.5.1的第 7149行多了这么一行代码：

**script.async = “async”;**

为 script标签添加一个名和值都为 async的属性，这是啥情况？ Google之。。。。。。

## 3.       script标签的 async属性 ##

相关文档：

a)          [Script async, Raindrop and Firefox 3.6][Script async_ Raindrop and Firefox 3.6]

b)          [Mozilla script document][]

c)          [Browser support for <script async=“true” />?][Browser support for _script async_true_]

d)          [HTML5 async specification][]

总的说来， async是 HTML5中为 script标签定义的属性，目前只有 Firefox3.6以上版本的浏览器才支持。

## 4.       script标签的 async和 defer属性的区别 ##

![image019.gif][]

从上面的 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 ”一节有详细的描述：

![image021.gif][]

## 5.       后记 ##

至此，这个系列的文章全部完成。我把全部 [DEMO的源代码打包 ][DEMO_] 供大家下载测试

[image015.gif]: /images/20220515/52126605080844129693aea6241edd45.png
[image017.gif]: /images/20220515/0f36f331507f4d9288446bcb01faa694.png
[Script async_ Raindrop and Firefox 3.6]: http://tagneto.blogspot.com/2010/01/script-async-raindrop-and-firefox-36.html
[Mozilla script document]: https://developer.mozilla.org/En/HTML/Element/Script
[Browser support for _script async_true_]: http://stackoverflow.com/questions/1834077/browser-support-for-script-async-true
[HTML5 async specification]: http://www.whatwg.org/specs/web-apps/current-work/#attr-script-async
[image019.gif]: /images/20220515/d12d794ef7044cca9c314a9a383579b0.png
[Best Practices for Speeding Up Your Web Site]: http://developer.yahoo.com/performance/rules.html
[image021.gif]: /images/20220515/2f0c3d5b1c974864839e92adf5bd5f53.png
[DEMO_]: http://sanshi.me/articles/jsorder/jsorder.zip