script中的defer和async

script的使用方式

在html页面中使用JavaScript的主要方法便是使用script标签. 它有两种使用方式. 第一种便是用src属性引用外部文件. 第二种是将JavaScript代码嵌套在script标签中. 如:

<!-- 第一种-->
<script src="http://www.example.com/xxx.js"></script>

<!-- 第二种-->
<script>
	var a  = 1
	console.log(a)
</script>

defer和async

在html解析时, 若没有加上defer和async属性, 则它们会按照在页面出现的顺序呢依次解析. 只有当前一个script解析完后, 才解析第后面的.
defer和async都只有在加载外部脚本时才有效. defer表示文档被完全解析和显示后再执行, 多个defer脚本根据规范会按序执行, 但实际上并不如此. async表示立即执行, 且不阻止页面的其他操作. 多个async脚本并不会按照它们的先后顺序执行. 但是async脚本一定会在页面的load事件前执行.

<!-- defer-->
<script defer="defer" src="http://www.example.com/xxx.js"></script>

<!-- async-->
<script async src="http://www.example.com/xxx.js"></script>

script的其他属性

charset, 可选属性, 指定src属性指向的代码字符集
language表示编写代码使用的脚本语言, 已被废弃
type表示代码使用脚本语言的内容类型. 默认为text/javascript

参考:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script