日期:2014-05-17  浏览次数:20589 次

HTML5中script的async属性介绍

HTML4.01为script标签定义了5个属性:

charset 可选。指定src引入代码的字符集,大多数浏览器忽略该值。

defer 可选。延迟脚本执行,相当于将script标签放入页面body标签的底部。除IE和较新版本的Firefox外,其他浏览器并未支持。

language 已废弃。大部分浏览器会忽略该值。

src 可选。指定引入的外部代码文件,不限制后缀名。

type 必选。指定脚本的内容类型(MIME类型)。现实中通常不指定该值也可以,浏览器会默认当作text/javascript类型来解释执行。

?

HTML5中的script属性

script标签在HTML5中除了具备HTML5标准属性以外,与HTML4.01相比移除了language属性,修改了type属性为可选的(默认text/javascript),并新增了一个属性async。

?

async属性的作用

定义脚本是否异步执行,取值true或false。

async如果指定为true,脚本会在页面渲染显示的过程中解析执行(浏览器会判断该脚本是否处于可用状态),这是一个很有意思也很实用的功能。

现在的script是怎样的?

1、把它放在head标签内。在下载script引入的外部脚本时,浏览器处于阻塞状态,网络不好或者script文件过大时,页面处于空白停顿状态,体验是并不够好。

2、把它放入页面底部。这是大家公认的提高前端页面性能和体验的方法,但还是存在一定的问题,放在页面底部的脚本是要等到页面文档流下载完毕才去下载、执行,页面中的交互会存在一个延迟的时间去实现。虽然页面显示时间变短了,但交互却被延后了。体验也不够好。

3、按需执行。在head标签内引入部分公共脚本,在每一个需要交互的HTML元素之后插 入script立即执行,需要特定条件才执行的脚本放到页面最底部。这也不是一个完美的解决方案,一则页面内穿插过多的script标签引起维护不便,二 来底部脚本还未加载完时用户便触发了某个条件该怎么办?虽有方法实现,但体验仍不够好。

支持async属性之后改变了什么?

async属性就是解决上面这些问题的,这样我们就可以在head标签内插入script,脚本与文档同时下载,脚本、文档可用时便执行。

async与defer

摘抄HTML5手册的解释,很好理解:

如果 async 属性为 true,则脚本会相对于文档的其余部分异步执行,这样脚本会可以在页面继续解析的过程中来执行。

如果 async 属性为 false,而 defer 属性为 true,则脚本会在页面完成解析时得到执行。

如果 async 和 defer 属性均为 false,那么脚本会立即执行,页面会在脚本执行完毕继续解析。

改变往往意味着丢掉不合时宜的,增加满足用户新需求的功能,HTML5很多新增特性让人期待,随着新装机安装windows7带来的IE版本的提升,距离IE6倒下的时刻不会太远了,未来的浏览器是否还是IE的天下也不好说。

参考资料:

http://developer.yahoo.com/performance/rules.html#js_bottom

http://www.w3school.com.cn/html5/html5_script.asp

http://www.w3.org/TR/html4/interact/scripts.html

http://www.w3.org/TR/2010/WD-html5-20101019/scripting-1.html#script

?