- 浏览: 381024 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (229)
- java编程 (4)
- java实用程序 (2)
- 算法设计 (34)
- 数据库 (8)
- ACM模板 (12)
- 技术术语 (1)
- java_web (3)
- php (22)
- eclipse (3)
- linux (25)
- linux命令使用心得 (3)
- web服务器 (8)
- IT知识 (2)
- 前端技术 (17)
- 开源软件 (5)
- vim (3)
- linux多线程 (9)
- web开发经验 (3)
- lua (5)
- linux编程 (3)
- smarty (1)
- mysql (4)
- Hive (2)
- 数据挖掘 (9)
- python (2)
- 生活 (1)
- C++ (2)
- 计算机 (1)
- objective-c (11)
- css (2)
- 游戏 (1)
- Mac (1)
最新评论
-
lr544463316:
我的怎么不行呀.....
Mysql Access denied for user ''@'localhost' to database 的一种解决方法 -
babaoqi:
使用时需要注意group_concat函数返回值的最大长度=g ...
mysql中的group_concat函数 -
代码能力弱成渣:
可以帮我看下我的代码么?我自己写的sam,也有ac过题的,但是 ...
求两个字符串的最长公共连续子序列(SAM实现) -
atgoingguoat:
有1000个?不过还是收藏下。
jquery常用的插件1000收集(转载)
转自: http://www.cnblogs.com/AndyWithPassion/archive/2011/09/03/2165441.html
html5中script的async属性
我兴奋于html5的原因之一是一些久久未能实现的特性现在可以真正运用于实际项目中了. 如我们使用placeholder效果蛮久了但是那需要javascript来实现. 目前firefox和chrome都是实现了script标签的async属性.这个新的属性能让我们以一种更 简单的方式防止浏览器阻塞,在这之前我们需要用一些javascript小窍门来解决这个问题.
async - html代码
< script async src = "myscript.js" onload = "myInit()" ></ script >
|
就像我之前提到的,加个属性很容易.
defer - html代码
script标签也有个defer属性,目前所有浏览器都已实现, 在firefox和chrome的早期版本没有实现此属性,IE从一开始就支持此属性.
< script defer src = "myscript.js" onload = "myInit()" ></ script >
|
async & defer - 它们的区别是什么
带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作.它们的不同之处在于script执行的 时机.带有async的script,一旦下载完成就开始执行(当然是在window的onload之前).这意味着这些script 可能不会按它们出现在页面中的顺序来执行,如果你的脚本互相依赖并和执行顺序相关,就有很大的可能出问题, 例如变量或者函数未定义之类的错误. 而对于带有defer的script,它们会确保按在页面中出现的顺序来执行,它们执行的时机是在页面解析完后,但在 DOMContentLoaded事件之前.(亲测下来确实如此,下面会给出我的测试用例和说明)
目前哪些浏览器支持defer和async
目前来看,最新版本的firefox和chrome(还有同样webkit内核的safari,本人机器上的版本是ff6,chrome15dev-m,IE9)都已支持这两个属性,也都支持script的load事件. IE的话对于defer是一直都支持的,async属性IE6~9都没有支持(IE10毫无疑问的会支持),onload是在IE9中新加入的属性.
--------------------下面来一些我对defer,async,onload的测试用例------------------------------
写了简单的四段脚本用于测试
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
/** script1 **/ window.ns = {}; window.ns.delay = function (n) {
var start = Number( new Date()),
wait = n * 1000;
while ( true ) {
var end = Number( new Date());
if (end-start >= wait) {
break ;
}
}
console.log( "take " + n + " seconds to execute" );
}; console.log( "create a namespace named ns" );
document.addEventListener( "DOMContentLoaded" , function () {
console.log( "oh yeah, Dom Ready!" );
}, false );
window.addEventListener( "load" , function () {
console.log( "oh yeah, All Resources Loaded!" );
}, false );
|
1
2
3
4
5
6
7
8
9
|
/** script2 **/ if (window.ns) {
window.ns.one = 'ONE' ;
console.log( 'window.ns.one:' + window.ns.one);
window.ns.delay(2);
} else {
console.log( 'oops...' );
} |
1
2
3
4
5
6
7
8
9
|
/** script3 **/ if (window.ns && window.ns.one) {
window.ns.two = "TWO" ;
console.log( 'window.ns.two:' + window.ns.two);
window.ns.delay(2);
} else {
console.log( 'oops...' );
} |
1
2
3
4
5
6
7
8
|
/** script4 **/ if (window.ns && window.ns.two) {
window.ns.three = "THREE" ;
console.log( 'window.ns.three:' + window.ns.three);
} else {
console.log( 'oops...' );
} |
用于测试的基本html页面
<!DOCTYPE htm> < html >
< head >
< meta charset = "utf-8" >
< title >test</ title >
< script type = "text/javascript" src = "script1.js" ></ script >
< script type = "text/javascript" src = "script2.js" ></ script >
< script type = "text/javascript" src = "script3.js" ></ script >
< script type = "text/javascript" src = "script4.js" ></ script >
</ head >
< body >
width = "200" height = "200" alt = "a big image of beauty" />
</ body >
</ html >
|
剩下的事情就是在script上加上defer和async进行测试
1.无defer和async属性
< script type = "text/javascript" src = "script1.js" ></ script >
< script type = "text/javascript" src = "script2.js" ></ script >
< script type = "text/javascript" src = "script3.js" ></ script >
< script type = "text/javascript" src = "script4.js" ></ script >
|
我们先看资源加载瀑布图(firefox和chrome类似,IE9的有点奇怪):
看得出来image的下载被script的执行给阻塞了.
console输出如下:
2.都给上defer属性
< script type = "text/javascript" src = "script1.js" defer></ script >
< script type = "text/javascript" src = "script2.js" defer></ script >
< script type = "text/javascript" src = "script3.js" defer></ script >
< script type = "text/javascript" src = "script4.js" defer></ script >
|
资源加载瀑布图:
看得出来所有资源进行了并行下载,没有阻塞img的情况
console输出和第1个测试的输出一致,IE9和chrome是如此,但是奇怪的是Firefox在这种情况下, 居然没有触发DOMContentLoaded事件,即输出少了Dom Ready!一行
3.部分给上defer属性
< script type = "text/javascript" src = "script1.js" ></ script >
< script type = "text/javascript" src = "script2.js" defer></ script >
< script type = "text/javascript" src = "script3.js" ></ script >
< script type = "text/javascript" src = "script4.js" defer></ script >
|
因为这里面4个script都是有执行顺序依赖的,所以如果defer属性不加选择的添加的话,就会出麻烦, 本例中,script1和script3就会先执行,script2和script4晚执行,就出现错误了
console输出如下:
4.都给上async属性
< script type = "text/javascript" src = "script1.js" async></ script >
< script type = "text/javascript" src = "script2.js" async></ script >
< script type = "text/javascript" src = "script3.js" async></ script >
< script type = "text/javascript" src = "script4.js" async></ script >
|
IE9根本不支持这个,所以不用测试. Firefox和chrome都是第一次访问时,出现了异步执行的情况, 之后有缓存的话script的执行顺序貌似得到了维护.资源时间瀑布上 表现出的是预期的情况,即没有给其他资源的下载造成阻塞
Chrome中第一次访问,console输出如下,无论出错与否chrome和firefox的DOMContentLoaded均未未触发
5.部分给async属性
< script type = "text/javascript" src = "script1.js" async></ script >
< script type = "text/javascript" src = "script2.js" ></ script >
< script type = "text/javascript" src = "script3.js" ></ script >
< script type = "text/javascript" src = "script4.js" async></ script >
|
这种情况的效果在chrome下比较明显,分析起来也很简单,4个script都是并行下载,但是如果script1和script4下完后立马执行, 很显然就破环了它们之间的依赖关系,可惜的是这种竞争的现象在Firefox中出现的概率比较低,可能跟firefox的缓存机制有关系
chrome的console输出如下:
发表评论
-
常用js插件
2013-02-28 16:03 748WdatePicker 日期控件 -
js刷新页面的方法
2012-12-02 03:58 750转自: http://www.jb51.net/article ... -
前端开源代码库
2012-10-30 21:31 971#bootstrap 主页:http://twitter.g ... -
js优秀代码或者框架
2012-10-28 19:59 742#overlib.js overlib 是一个生成提示框与弹 ... -
前端开发工程师需要掌握的知识
2012-10-28 19:47 1012转自: http://www.html5war.com/?p= ... -
php重定向
2012-10-14 19:08 784一、使用location对象的href属性 <h ... -
JavaScript中有三个可以对字符串编码的函数
2012-10-13 17:39 773转自: http://www.cnblogs.com/qian ... -
JS内置函数
2012-10-13 17:36 940转自: http://hi.baidu.com/ ... -
js中的var定义局部变量
2012-10-13 15:50 1432摘自《O'Reilly - Learning JavaS ... -
javaScript document对象详解
2012-10-09 22:10 624转自: http://webcenter.hit.edu.c ... -
addEventListener 的用法
2012-08-25 16:52 1514转自: http://parkmy.iteye.com/blo ... -
Yahoo的军规条例
2012-08-24 01:24 851转自:http://ued.alimama.com/ ... -
CSS之Position详解
2012-08-08 08:54 794转自: http://www.cnblogs.c ... -
jquery常用的插件1000收集(转载)
2012-06-19 15:17 1894转自: http://www.cnblogs.com/liai ... -
鼠标经过图片放大
2012-06-06 16:21 979css代码: <style type=&quo ... -
下拉菜单
2012-06-02 17:05 680css部分 <style type=" ...
相关推荐
1.HTML5实现了script的async属性,这个新的属性可以让js在浏览器中以非阻塞的模式加载,另外script还有一个defer属性,这个属性目前所有浏览器都已实现(除了firefox和chrome的早期版本),IE这方面做得好,从一开始...
向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余...
异步加载,可以理解为无阻塞并发处理,过去我们使用各种JavaScript技巧来做这种事情,现在WebKit为HTML5实现了SCRIPT标签的async异步属性,感兴趣的朋友可以了解下
script 标签用于定义客户端脚本,比如 JavaScript。 除全局属性之外有如下属性 src 定义指向包含脚本的文件的 URL(这样您就可以引用某个包含脚本的文件,而不是直接把脚本插入您的 HTML 文档中) async 定义脚本...
[defer] 可以在[removed]中加入defer属性,告诉浏览器这段script不必立即执行,那么浏览器就会在完全载入文档之后再执行这个script,相当于[removed],但它比...[removed]标签的async属性——HTML5新的异步、并行
HTML4.01为[removed]定义了6个属性,包括defer和async。defer和async都是可选的,且只对外部脚本文件有效。 一、当浏览器解析到script脚本,没有defer或async时: [removed][removed] 浏览器会立即加载并执行指定...
本文结合已有的一些文章以及MDN文档中对两个特性的阐述,对defer和async进行更全面的研究和总结,希望能够帮助开发者更好地掌握这两个特性。 1 引言 在《浏览器环境下JavaScript脚本加载与执行探
保存任何HTML表单元素支持内容可编辑属性完全定制如果ajax请求失败,请重试功能将表单元素作为字段组发送提供在发送Ajax请求之前验证更改的方法经过严格测试安装$ npm install form-async 我们建议从npm安装,然后...
在HTML5中script主要有以下几个属性:async,defer,charset,src,type, async(可选): 关键词:异步脚本,外部文件,立即下载; 当标签中包含这个属性时会立即下载脚本(外部文件),只对外部脚本文件...
基本概念 javascript是一门解释型的语言,浏览器充当解释器。 js执行引擎并不是一行一行...html5为[removed]定义了async属性。整个属性与defer属性类似,都用于改变处理脚本的行为。同样,与defer类似,async只适用于外
在html页面中插入JavaScript的方法主要是使用script元素,他有几个属性: async: 表示应立即下载脚本,但不应妨碍页面中的而其他操作,比如下载资源或等待其他等待加载的脚本,只对外部脚本有效。 defer: 表示...
如果您只想嵌入单个图表,您可以使用包含的内联嵌入脚本,将两个数据属性替换为您从 chartbuilder 保存的文本后,将其粘贴到您的 html 中。 <script async data-chart='[CHART-JSON-STRING]' data-template='...
公关预览 PR Preview使...已知的问题使用async属性包含ReSpec时,它会出现竞争状况问题。 而是使用defer属性,如下所示: < script src =" https://www.w3.org/Tools/respec/respec-w3c-common " class =" remove
PromiseFundementals :dashing_away: :hundred_points: :hollow_red_circle: 关于Java中的Promise的字节和比特 :hollow_red_circle: :check_mark: 您可以执行特定的javascript文件(不适用于html文件)作为node ...
Javascript html css vue题目 引自:前端小哥CSS HTML1.行内元素/块级元素,非替换元素/替换元素★★★2.img标签 的title和alt属性★★3.meta标签 ★★4.DOCTYPE 标签★★★5.script标签 的defer和async★6.W3C盒...
XML创建了标识,而DOM的作用就是告诉script如何在浏览器窗口中操作和显示这些标识 上面我们已经简要的讲述了一些XML的基本原理,我们来看看它们之间的关联以及它们是如何工作的,先看这里一张图: 1.XML描述...
clip:rect(5px 15px 15px 5px)"> 获取选中内容 document.selection.createRange().duplicate().text 自动完成功能 打开该功能 关闭该功能 窗口最大化 (window.screen.width - 4,window.screen.height-...
script src =" good-map.js " async defer > </ script > 或者,使用HTML导入以包含 :< link rel =" import " href =" good-map.html " >用法在页面上的任意位置创建一个元素。 确保使用display: ...
咏叹调提示使用 aria 进行声明性实例化的简单工具提示组件。 我们经常需要一些工具提示来获取有关元素功能的额外信息。 你猜怎么着…?... script async src =" lib/aria-tips.js " onload =" AriaT