Script 标签 defer 属性与 async 属性的差异

最近在做一些的一些业务工作涉及到 script 标签的 defer 以及 async 属性，这里记录一下。

script 标签中 defer 属性

在进行页面优化的时候，有选项可以优化网站使用到的 JS 文件，优化加载速度。

啥意思呢？就是配置了相关选项后，浏览器在加载此 JS 文件的时候不会阻止站点上其他资源的加载，从而加快速度。

那这个功能它是如何实现的呢？

通过页面可以得知它是通过给加载 JavaScript 文件的 <script> 标签都添加了 defer 属性，例如：

html 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>

至于其他的优化这里我们不涉及，我们只探讨一下 <script> 标签上的 defer 起到了什么作用以及和其他相关属性的差异。

defer 属性

当我们给 <script> 标签添加 defer 属性时（像上面的代码一样），JS 资源的加载是异步的，同时它会告诉浏览器延迟执行相关 JS 代码，直到 HTML 文档完全解析完成。即使当前对应的 JS 资源已经下载完毕，它仍会等待直到整个页面都解析完毕后再执行。这样做的好处是可以减少页面加载时间，因为浏览器可以继续解析 HTML 文档而不必停下来等待 JavaScript 代码的执行。

通常它被用于那些不需要在文档解析过程中立即执行的 JS 脚本，但需要在整个页面解析完成后执行的情况。

如果有多个多个带有 defer 属性的 JS 脚本则会按照它们在文档中出现的顺序依次执行。

graph TD; A[开始解析HTML文档] --> B{遇到带defer的script标签} B -->|是| C[开始异步下载script] B -->|不阻塞 html 解析| D[继续解析HTML文档] C --> E[下载完成，等待HTML文档解析完成] D --> F{文档解析完成} F -->|是| G[触发DOMContentLoaded事件之前] E --> G G --> H[执行defer的script] H --> I[触发DOMContentLoaded事件] I --> J[完成]

async 属性

html 复制代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js" async></script>

async 属性则告诉浏览器立即开始下载对应的 JS 脚本，但不应阻止 HTML 文档的解析。而和 defer 不同的是 JS 代码会在任何时候，只要是下载完成时就会立即执行。这通常会在文档解析过程中的某个点发生，而不是在全部解析完成之后。

这个属性适用于那些与页面其余部分独立的脚本，例如广告加载或收集分析数据的脚本。

由于它只要下载完成就会立即执行，所以带有 async 属性的脚本不能保证按照它们在文档中的出现顺序执行，因为它们是在文件下载完成后立即执行的。

graph TD; A[HTML解析开始] --> B{检测到带async的script标签} B -->|是| C[异步下载脚本] B -->|同时| D[继续解析HTML文档] C -->|下载完成| E[立即执行脚本] E -->|执行期间| F[暂停HTML解析] E -->|执行完成| G[恢复HTML解析] D --> F G --> H{HTML文档解析完成} H --> I[触发DOMContentLoaded事件]

type="module"

此值导致代码被视为 JavaScript 模块（ES module）。其中的代码内容会延后处理。 defer 属性不会生效。

对于使用 module 的更多信息，请参见 JavaScript 模块指南。与传统代码不同的是，模块代码需要使用 CORS 协议来跨源获取。

没有 async 、 defer 或 type="module" 属性的脚本，以及没有 type="module" 属性的内联脚本，会在浏览器继续解析页面之前立即获取并执行。

总结

defer ：异步加载。直到文档解析完成才会执行，保证执行顺序。
async ：异步加载。不阻塞文档解析，执行时间不确定，不保证执行顺序。