我们发现
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的源代码打包
供大家下载测试
分享到:
相关推荐
《jQuery 1.5.1:深入解析与应用》 jQuery 1.5.1是JavaScript库jQuery的一个重要版本,自2011年发布以来,它为开发者提供了更为高效和便捷的DOM操作、事件处理、动画制作以及Ajax交互等功能。这个版本在前一版的...
《jQuery 1.5.1:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,以其简洁的API和强大的功能深受开发者喜爱。在本篇文章中,我们将聚焦于jQuery 1.5.1版本,探讨其核心特性、优化策略以及在实际...
《jQuery 1.5.1 API参考手册》是前端开发者不可或缺的工具书,它详尽地阐述了jQuery库在1.5.1版本中的各种功能和用法。jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript编程,尤其是网页DOM操作、事件...
jQuery是一款高效、简洁、易用的JavaScript库,它极大地简化了JavaScript编程,让网页DOM操作、事件处理、动画设计和Ajax交互变得更加便捷。在给定的压缩包中,包含两个文件:`jquery-1.5.1.js`和`jquery-1.5.1.min....
在学习jQuery 1.5.1的过程中,开发者不仅要理解其基本用法,还要学会如何与Java JSP环境相结合。例如,使用jQuery进行前端数据验证,然后通过Ajax提交到服务器,配合JSP进行后端处理。同时,了解J2EE的相关知识,如...
jquery-1.5.1.js;jquery-1.5.1.min.js 框架
《jQuery 1.5.1.min.js:JavaScript 引领者的精华版本》 在Web开发领域,jQuery无疑是最受欢迎的JavaScript库之一,以其简洁、高效和强大的功能深受开发者喜爱。标题中的"jquery-1.5.1.min.js"是jQuery库的一个特定...
jquery最新类库,可用于dreamweaver中。
《jQuery核心原理与应用解析》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它以其简洁的API和强大的功能,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。本文将深入探讨jQuery的核心原理...
jQuery 1.5.1 API参考手册CHM版
4. **新功能与修复**:1.5.1 版本的重要更新包括对旧有bug的修复,确保组件的稳定性和兼容性。同时,可能新增了一些新的组件或者功能,比如改进的数据处理方式、增强的可访问性或新的主题支持。 5. **实例分析**:...
《jQuery 1.5.1:深入理解与应用》 jQuery是JavaScript库中的巨头,以其简洁的API和强大的功能赢得了全球开发者的喜爱。本篇将深入探讨jQuery 1.5.1版本,包括其核心特性、优化的min版本以及对于开发者友好的vsdoc...
jQuery,一个轻量级、高性能的JavaScript库,自2006年发布以来,因其简洁易用的API而迅速成为Web开发领域中最受欢迎的库之一。在给定的压缩包文件中,包含了两个重要的版本:`jquery-1.5.1.min.js`和`jquery-1.7.2....
- jQuery 1.5.1支持多种浏览器,包括IE6+、Firefox、Chrome、Safari、Opera等,确保跨平台一致性。 10. **智能提示** - 在Visual Studio中使用jQuery 1.5.1,开发者可以享受到智能提示功能,输入`$(`后,IDE会...
在Web开发领域,jQuery库因其简洁的API和强大的功能,已经成为JavaScript最广泛使用的库之一。本篇将聚焦于jQuery 1.5.1版本,特别是针对ASP.NET开发环境的使用。`jquery-1.5.1-vsdoc`是一个专门为Visual Studio设计...
1. **jQuery 基础**:EasyUI 建立在 jQuery 之上,因此理解 jQuery 的基本操作,如选择器、事件处理、DOM 操作等,是使用 EasyUI 的前提。jQuery 提供了简洁的 API 来操作 HTML 文档、处理事件、执行异步请求以及...
jquery脚本库最新版下载,关于jQuery不再详细介绍了吧,一款优秀的JavaScript前端交互设计脚本框架库,通过强大的选择器,可帮你快速完成一些意想不到的Ajax交互功能,本压缩包内的脚本包括压缩版本和未压缩版本:...
jQuery EasyUI 1.5.1 是一个基于 jQuery 的轻量级前端框架,它提供了一系列易于使用的组件,如对话框、表格、下拉菜单、树形控件等,用于快速构建用户界面。这个中文API文档包含了对这个版本的详尽解释,帮助开发者...