博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[原创]如何确保JavaScript的执行顺序 –之jQuery1.5.1与jQuery1.4.4的差异
阅读量:4970 次
发布时间:2019-06-12

本文共 1851 字,大约阅读时间需要 6 分钟。

1.      引言

在上一篇文章《》中,我们发现jQuery.html函数在动态加载跨域JavaScript时,在FirefoxOpera中可以按照引入顺序执行,而在IEChromeSafari中都不能确保执行顺序。

经过分析,我们发现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.htmjquery-1.4.4.js

通过jQuery.html动态加载跨域JavaScript文件

test2_2.htmjquery-1.5.1.js

通过jQuery.html动态加载跨域JavaScript文件

Firefox 3.6

IE 8

Chrome 10

Safari 4

Opera 11

 

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

从上表我们明显看出区别,jQuery1.5.11.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)        

 

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

 

4.      script标签的asyncdefer属性的区别

 

从上面的W3C的官方描述中,我们有如下结论:

1.       async属性和defer属性都是用来标识脚本的执行方式。

2.       对于内联JavaScript(没有src属性),不能指定asyncdefer属性

3.       设置async,不设置defer。脚本将会异步执行,也就是在脚本下载完成后立即执行。

4.       不设置async,设置defer。脚本将会在页面DOM解析完毕后执行。

5.       两个都不设置。脚本的下载和执行是阻塞模式,将会阻塞DOM树的继续渲染。

 

目前,据我所知:Firefox3.6script标签支持async,不支持defer;而IE下,script标签支持defer而不支持async属性。

 

其实上面已经提到了asyncdefer的一个重要区别。async标识异步执行(也就是说执行时可能页面的DOM树还没有解析完成),而defer是在页面的DOM树解析完毕后执行。defer的这种特性和我们把JavaScript脚本放在页面的最底部的效果其实是一致的。

这点在Yahoo的“”的“Put Scripts at the Bottom”一节有详细的描述:

5.      后记

至此,这个系列的文章全部完成。我把全部供大家下载测试。如果你有什么建议或意见,也欢迎光临我的,评论留念。

 

 

转载于:https://www.cnblogs.com/sanshi/archive/2011/03/03/1970344.html

你可能感兴趣的文章
【慢慢学Android】:1.Activity之间的转换以及数据的传递(Intent)
查看>>
python 使用自定义函数
查看>>
jenkins构建触发器详解-不登录触发远程构建详解
查看>>
SoSoft项目之C# WinForm托盘图标实例
查看>>
C#继承
查看>>
2013年总结(0)-序
查看>>
谈谈我对学习技术的一点体会和看法
查看>>
在jquery中处理带有命名空间的XML数据
查看>>
接口连接
查看>>
Android测试环境搭建(win7)
查看>>
shell编程中用户输入处理(shell 04)
查看>>
moble slider
查看>>
line-height的笔记
查看>>
linux命令大全
查看>>
REST API (from IBM)
查看>>
【IOI 2002/FJOI2019】任务安排(超级计算机)
查看>>
自定义适用于手机和平板电脑的 Dynamics 365(二):窗体自定义项
查看>>
[SDOI2019]快速查询
查看>>
Python入门
查看>>
Ajax校验
查看>>