JS脚本中async与defer有何本质区别？

本文共计748个文字，预计阅读时间需要3分钟。

在HTML中，若要引入Google reCAPTCHA，可以使用以下代码：

这段代码中，`async` 和 `defer` 属性共同存在，表示脚本可以异步加载，并且会在文档解析完成后执行。这两个属性不能同时存在多个，因此你只需选择一个添加即可。

一 引言

代码如下

<script src="www.google.com/recaptcha/api.js" async defer></script>

可以看到在script标签中，存在async与defer两个属性，首先这两个属性并共存，说直白点，你一个都不加，或者加两个属性其一，脚本加载规则都会不同，这点我在之前确实没仔细了解过，导致我在实际开发中遇到了这样一个问题：

我在同一个页面需要引用2个script脚本，大致如下：

<script src="www.google.com/recaptcha/api.js"></script> <script src="demo.js"></script>

注意，两个script脚本都没有添加async与defer属性，demo.js中包含了谷歌人机验证的初始化程序，正常来说一定得先加载必要的资源，这样我的验证码才能初始化成功，这就像使用jQuery得先引用jQuery.js是一个道理。

但事实上，因为外网的问题，api.js引用虽然在前面，但下载并不稳定，有时候会出现下载反而比demo.js更晚的情况，这就导致demo.js中的初始化报错，怎么办呢？这就得async与defer出场了，我们先来了解它们的区别。