总结前端开发模式和规范 2、HTML5中script的async属性异步加载JS

时间:2021-09-02 17:11:20

 

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