这是我参与8月更文挑战的第15天，活动详情查看：8月更文挑战
本文是笔者在参加字节跳动第一届前端青训营进阶班的学习笔记。
为什么需要async和defer？
在进行详细介绍async和defer的区别之前，我们先讲讲为什么需要这两个属性，请看下面的例子，假如资源1需要加载很久才能完成，但是资源2很快就可以完成，此时用户需要等待很久才能看到页面，造成用户体验不好，所以我们需要一个推迟加载资源1的方法，这就是async和defer诞生的原因。
<script src="资源1.js"></script> <script src="资源2.js"></script> 复制代码
- 解决上述问题的方法
让第二个文件推迟执行，也就是说添加defer属性。
<script src="资源1.js" defer></script> 复制代码
async和defer的区别
1. 不含async也不含defer
此时执行顺序是同步的，也就是按照定义的顺序，谁在上面谁先执行，执行完一个在执行下一个。这是script标签在body底部的情况，如果在head中定义则会阻塞HTML的解析，请看下图。JS脚本的加载和执行会阻塞DOM的渲染。
2. 只含async
立即下载，不影响其他操作，等下载完成之后在暂停HTML解析然后执行脚本。(加载完成后会立即执行)
3. 只含defer
立即下载，但是在Html解析和script加载完之后在执行defer属性标记的脚本。
async和defer的相同之处
- 都是异步加载。
- 都不影响DOM解析和其他资源的加载。
执行步骤图示
如果你想对这两个属性进行测试，可以尝试使用node创建一个服务器，然后通过延迟返回来测试输出的顺序。
