html5中script的async属性
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的测试用例------------------------------
写了简单的四段脚本用于测试
/** 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);
/** script2 **/
if(window.ns) {
window.ns.one = 'ONE';
console.log('window.ns.one:' + window.ns.one);
window.ns.delay(2);
} else {
console.log('oops...');
}
/** 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...');
}
/** 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>
<img src="http://img9.zol.com.cn/desk_pic/big_452/451134.jpg"
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输出如下:
关于script的onload属性会另外写一篇文章来记录.
最后,如果您有什么疑问或者发现文中有错误,欢迎指出,共同进步
html5中script的async属性的更多相关文章
- HTML5中script的async属性异步加载JS
HTML5中script的async属性异步加载JS HTML4.01为script标签定义了5个属性: charset 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer 可 ...
- HTML5特性:使用async属性异步加载执行JavaScript
HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的.比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现.而HTML5里给Ja ...
- script标签中defer和async属性的区别
这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一 ...
- HTML中<script>的defer属性与async属性
defer 属性会在 DOMLoaded 事件之前完成异步加载,加载不会阻塞 DOM 解析,并且 script 的顺序会按照 DOM 中的顺序加载. async 属性就是异步加载,没有什么顺序的保证.
- 【HTML5 】<script>元素async,defer异步加载
原文地址:HTML5′s async Script Attribute原文日期: 2010年09月22日翻译日期: 2013年08月22日 (译者注: 异步加载,可以理解为无阻塞并发处理.) (译者再 ...
- html5中常见的全局属性
1.contentEditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 该元素还隐藏一个inherit状态 也是 ...
- html5中新的标准属性
属性 值 描述accesskey ...
- HTML5中 基本用法及属性 韩俊强的博客
从今天开始更新H5相关学习:希望大家能一起学习,多学习一门语言,多一门乐趣! 了解Html5: Html5基本属性: <!DOCTYPE html> <html lang=" ...
- html5中 input的pattern属性 和 details/summary元素
html5--3.21 课程小结与其他新增元素 一.总结 一句话总结: input的pattern属性可以设置正则验证,比如检测学号的位数和数字区间 details/summary元素配合起来可以做元 ...
随机推荐
- solr安装使用笔记
下载 solr官方下载地址:http://lucene.apache.org/solr/ 使用 启动 solr dir/bin/solr.cmd start 停止 solr dir/bin/solr. ...
- Struts2远程代码执行漏洞预警
近期struts2 框架再现高危远程命令执行漏洞,漏洞编号S2-045,CVE编号CVE-2017-5638.利用此漏洞可对使用了struts2框架的网站进行远程命令执行,对服务器造成威胁.请相关单位 ...
- 电脑PE系统工具
自己收集的一些PE电脑维护工具 电脑店PE工具 http://u.diannaodian.com/ 通用PE工具箱 http://www.tongyongpe.com/ 大白菜PE工具 http:// ...
- 王立平--include在Android中的应用
一个布局中包括还有一个布局 1.在layout下定义activity_other.xml布局 2.代码中的包括例如以下: <LinearLayout xmlns:android="ht ...
- Statusbar
Main window The QtGui.QMainWindow class provides a main application window. This enables to create a ...
- Canvas简述
HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相 ...
- glibc的几个有用的处理二进制位的内置函数(转)
— Built-in Function: int __builtin_ffs (unsigned int x) Returns one plus the index of the least sign ...
- DB2建库简单例子
--重启数据库 FORCE APPLICATION ALL DB2STOP DB2START --创建数据库 TERRITORY US COLLATE USING SYSTEM ) CONNECT T ...
- webservice系统学习笔记3-分析wsdl文件的组成
详细分析前面章节的服务的wsdl文件 1.http://localhost:8888/ws01?wsdl 2.http://localhost:8888/ws01?xsd=1 在接口服务中添加复杂类型 ...
- C#:定义窗口快捷键
事情的关键是要设置Form的KeyPreview属性,然后再在KeyDown事件中检查按键. public class TEST : Form { public TEST() { Initialize ...