HTML5中script的async属性异步加载JS

HTML5中script的async属性异步加载JS

 

 

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，那么脚本会立即执行，页面会在脚本执行完毕继续解析。