我们知道，在浏览器解析 HTML 过程中，当遇到 <script> 标签时，会停止解析，转而（下载并）执行相应的脚本代码，然后继续解析。
这就是为什么通常我们会将 <script> 标签放在 </body> 前，以加快页面的呈现速度。
async 与 defer 可以让浏览器改变默认策略，但两者有些许不同，这篇文章来聊一聊两者的区别。
对比
先放上图例：
默认情况
默认情况下，<script> 会阻塞 HTML 的解析，直到脚本代码的下载和执行全部完成，再继续解析：
添加 async
当添加 async 属性后，浏览器会并行下载脚本代码，下载过程不会阻塞 HTML 的解析，下载完成后才会阻塞 HTML 的解析，执行脚本代码，脚本代码执行完毕后继续解析 HTML：
此属性仅在通过 src 加载脚本代码的情形下才适用，如果是内联代码，则会直接执行。
添加 defer
当添加 defer 属性后，浏览器会并行下载脚本代码，下载过程不会阻塞 HTML 的解析，直到 HTML 解析完成后，才会执行脚本代码：
使用场景
知道了两者的作用，那什么情况下使用呢？
当需要动态创建 HTML 内容，又想尽可能快的呈现给用户时可以使用 async，例如添加广告。
在进行统计分析时，如果想要记录 HTML 的解析时间，则可以使用 defer。