logo

看一下这张图，已经说明了普通 script，async 和 defer。

image

普通 script

一个普通的 script 标签如下：

<script src="foo.js"></script>

当解析 HTML 遇到 <script> 的时候：

  1. 停止解析；
  2. 请求下载 foo.js（如果它是外部引入的，不是内联脚本内联脚本） ；
  3. 执行 foo.js；
  4. 执行完成之后，继续解析 HTML

async

<script src="foo.js" async></script>

添加 async 之后，解析遇到这个 <script> 时：

  1. 并行的请求下载 foo.js，不停止解析；
  2. 下载完成之后，停止解析，立即执行下载的脚本；
  3. 执行完成之后，继续解析。

值得注意的是，async 脚本会在脚本加载后立即执行，因此不能保证执行顺序（最后包含的脚本可能会在第一个脚本文件之前执行）。

defer

<script src="foo.js" defer></script>

添加 defer 之后，解析遇到这个 <script> 时：

  1. 并行的请求下载 foo.js，不停止解析；
  2. 只有解析完成之后，在 DOMContentLoaded 实践前执行。

与 async 不同，defer 保证按照它们在页面中出现的顺序执行。

总结

参考