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

没有defer或async属性，浏览器会立即加载并执行相应的脚本。不等待后续文档元素的加载，只要读到就开始加载和执行，这样做会阻塞后续文档的加载。

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

如果有async属性，文档的加载和渲染与js脚本的加载和执行是并行执行的，就是异步执行。

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

有了defer属性，文档的加载和渲染和js脚本的加载是并行执行的（请注意，js脚本只加载不执行），js的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发之前。

蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。

从上图中可以明确几点：

1、defer和async的网络加载过程是一致的，都是异步执行。

2、区别在于加载完成之后什么时候执行，可以看出defer是文档所有元素解析完成之后才执行的。

3、如果存在多个defer脚本，那么它们是按照顺序执行脚本的，而async，无论声明顺序如何，只要加载完成就立刻执行