（1）情况1
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行。
（2）情况2 (异步下载)
async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。
这种方式加载的 JavaScript 依然会阻塞 load 事件。即async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。
（3）情况3 (延迟执行)
defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。
整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。
defer 与相比普通 script，有两点区别：
载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后。
在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。
总结：
1）、defer和async的作用：
传统方式下，在文档中遇到script标签，会先加载js脚本，后面的文档加载会先停止。如果在script脚本中插入defer和async，可以使得js脚本与文档加载异步进行。
2）defer和async的区别
区别在于脚本加载完成后何时运行。
- defer 是在浏览器渲染完成之后，document的DOMContentLoaded之前执行js代码；并且按照加载的顺序执行代码。
- async 是在加载完成后立即执行，它可能在DOMContentLoaded
触发之前或之后执行；特点是乱序执行，因为每个js代码的加载时间不同。
仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics
关于DOMContentLoaded 的拓展知识：
DOMContentLoaded和load的区别：它们都是页面加载的时候触发的事件。区别在于触发的时机不一样。
浏览器渲染页面DOM文档加载的步骤：
1.解析HTML结构。
2.加载外部脚本和css文件。
3.解析并执行脚本代码。
4.DOM树构建完成。(此时会触发DOMContentLoaded事件)
5.加载外部图片等文件。
6.页面加载完毕。(此时会触发load事件)
另外需要提一下的是，我们在 jQuery 中经常使用的 $(document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // …代码… }); 监听的是 load 事件。
参考：
- https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html