HTML5中script的async属性

HTML4.01中的script标签属性

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的天下也不好说。

参考资料：

1. http://developer.yahoo.com/performance/rules.html#js_bottom
2. http://www.w3school.com.cn/html5/html5_script.asp
3. http://www.w3.org/TR/html4/interact/scripts.html
4. http://www.w3.org/TR/2010/WD-html5-20101019/scripting-1.html#script
5. http://www.csser.com/board/4f3f516e38a5ebc978000514