本文已参与「新人创作礼」活动，一起开启掘金创作之路

1、没有 defer async 属性

<script src="script.js"></script>

没有 defer 或  async，浏览器会立即加载并执行指定的脚本，
“立即”指的是在渲染该 script 标签之下的文档元素之前，
也就是说不等待后续载入的文档元素，读到就加载并执行。

2、defer 属性

<script defer src="script.js"></script>

文档解析时，遇到设置了defer的脚本，就会在后台进行下载， 但是并不会阻止文档的渲染，当页面解析&渲染完毕后。 会等到所有的defer脚本加载完毕并按照顺序执行， 执行完毕后会触发DOMContentLoaded事件。

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后， 触发 DOMContentLoaded 事件前执行。 有 defer 属性的脚本会阻止 DOMContentLoaded 事件， 直到脚本被加载并且解析完成。

3 async 属性

<script async src="script.js"></script>

该属性能够消除解析阻塞的 Javascript 解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本， 之后才能继续解析

菜鸟理解

async 属性一旦脚本可用，则会异步执行。

注意：async 属性仅适用于外部脚本（只有在使用 src 属性时）。

注意：有多种执行外部脚本的方法：

1、async
如果 async="async"：
		脚本相对于页面的其余部分异步地执行
		（当页面继续进行解析时，脚本将被执行）
		
2、defer
如果不使用 async 且 defer="defer"：
		脚本将在页面完成解析时执行
		
3、
	如果既不使用 async 也不使用 defer：
		在浏览器继续解析页面之前，立即读取并执行脚本

推荐的应用场景

defer 如果你的脚本代码依赖于页面中的DOM元素（文档是否解析完毕），或者被其他脚本文件依赖。

async 如果你的脚本并不关心页面中的DOM元素（文档是否解析完毕），并且也不会产生其他脚本需要的数据。

如果不太能确定的话，用defer总是会比async稳定。