【HTML】script 中的 defer 和 async 属性的区别是什么？

<script src='xxx'></script>
<script src='xxx' async></script>
<script src='xxx' defer></script>

单独 script 标签：不做任何处理加载 JS 脚本

async：异步加载 JS 脚本

defer：延迟加载 JS 脚本

相同点：都可以加载 js 脚本并在加载完后由浏览器执行

不同点：

• 是否会阻塞浏览器解析 HTML 不同

  • 单独的 script 加载和执行都会阻塞浏览器解析 HTML；
  • async 异步加载不会阻塞解析，但是加载完会立刻执行，会阻塞解析；
  • defer 同样采用异步加载，但是会在加载完后会等待浏览器解析完成后再执行。

• JS 执行顺序不同

  • 单独的 script 在 HTML 中按顺序执行；
  • async 根据网络请求的返回顺序执行，谁先返回先执行；
  • defer 在 HTML 中按顺序执行。

参考

图解 script 标签中的 async 和 defer 属性