当我们遇见script的时候

<script src="/path/to/script.js"></script>

它会执行以下步骤

1.暂停 HTML 文档解析器

2.创建新请求以下载脚本

3.在脚本完全下载后立即执行脚本

4.执行结束后，继续解析 HTML 文档

此流程提供了糟糕的用户体验，假如脚本下载时间过长，用户将无法与页面交互。在看到整个页面被解析之前，他们必须等待所有脚本被下载并完全执行。

为了解决这个问题，HTML5 为 script 标签提供了两个属性。它们是 async 和 defer

async

<script src="/path/to/script.js" async></script>

下载 async 脚本后，浏览器将暂停文档解析器，执行脚本并继续解析文档。

1.解析文档

2.下载脚本

3.暂停解析

4.执行脚本

5.恢复解析

defer

<script src="/path/to/script.js" defer></script>

只有当解析器完成其工作时，才会执行 defer 脚本。

1.解析文档

2.下载脚本

3.执行脚本

注意：这个过程文档是不会停止解析的

注意

注意：没有 src 属性的脚本(即不是内联脚本)，async 和 defer 属性会被忽略。