defer/async

<script>（默认模式）

脚本的下载和执行会阻塞html的解析

<script async>

脚本的下载阶段是异步的，不会阻塞html的解析，一旦下载完成，脚本便会执行，此时开始阻塞html的解析

<script defer>

脚本的下载阶段同样是异步的，不会阻塞html的解析，下载完成后不会立即执行，而是等待解析阶段完成后再执行

适用场景

• 当你的js是个独立的模块且不依赖任何js，使用 async。（因为async并不保证按照书写的顺序执行脚本，防止出现后面引入的脚本依赖前面引入的脚本，同时后面的脚本先下载完成就开始执行的情况）

// B依赖A，但是B先下载完毕执行
<script src='A.js' async />
<script src='B.js' async />

• 如果出现上述情况，则可以使用defer，因为A.js和B.js都下载完成后，会按书写顺序开始执行，即

// B依赖A
<script src='A.js' defer />
<script src='B.js' defer  />

• 当A.js较小时，也可以将引入模式改为默认

// B依赖A
<script src='A.js' />
<script src='B.js' async />

注意

在一些旧版的浏览器中，defer脚本并不一定按照书写顺序执行

---

参考
async vs defer attributes
拒绝js阻塞—defer、async作用和区别分析