手记

jQuery1.5.1与jQuery1.4.4的差异

经过分析,我们发现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的源代码打包供大家下载测试。如果你有什么建议或意见,也欢迎光临我的技术博客,评论留念。

 

 

0人推荐
随时随地看视频
慕课网APP