Javascript 异步是否比延迟更好？

按照我的理解，脚本应该是

defer

ed，而不是

async

ed，因为这种方式解析不需要停止来执行它们（我现在就讲）。如果必须停止解析，这意味着页面内容需要更长的时间才能显示，对吗？如果是这样，为什么

async

比

defer

更好

示例：我正在我的网站上使用Google reCAPTCHA。谷歌要求我在结束标记之前插入脚本：

    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>

---

为什么在页面完成加载之前需要执行此脚本？我不是应该推迟吗？

好吧，在网上搜索了几个小时后，我终于有了答案！发件人：

下载完资源后，将立即解析并执行加载了ASYNC的脚本。而DEFER脚本直到解析完HTML文档（AKA、DOM Interactive或performance.timing.domInteractive）后才会执行

通过比较异步瀑布和延迟瀑布，我们发现使用延迟可以使DOM交互触发更快，并允许渲染更快地进行

然而：

即使ASYNC和DEFER不阻止HTML解析器，它们也可以阻止呈现。当它们在渲染完成并接管浏览器主线程之前被解析和执行时，就会发生这种情况。中没有任何说明他们必须等到渲染完成

因此，基本上，我的理解是，

defer

可以加快渲染速度，但最终页面加载所需的时间与整个渲染过程中执行的所有Java脚本一样长。这对用户来说稍微更令人满意，因为他们可以更快地看到事情的出现。然而，如果我们真的想提高加载速度，我们应该尽可能地提高加载速度

---

总之：似乎没有任何理由使用

async

而不是

defer

是的，async有时是优于defer的选择，有时是较差的选择。这很容易通过计时进行测试，直到您关心的事件发生在使用async或defer（或load，或inserted by load，等等）时为止。许多浏览器甚至附带了内置的开发工具来向您显示定时事件的“瀑布”

你提到的图表在概念上是漂亮和有用的，但它们并没有提供任何科学的衡量标准。只有测量你关心的事件发生的时间，才能（从统计上）准确地告诉你哪一个最快

你要么测试了一件事，要么仅仅依靠信仰

---

（特别是就Google reCAPTCHA而言，我并不十分了解它，但我知道在某些实现中，它会通过各种可用的标准进行尝试[甚至可能是鼠标光标在与显示的验证码交互之前的移动方式]提前确定页面是否可能被实际用户使用。用户当然会在页面完全加载之前与页面进行频繁交互，因此这段时间将提供这方面的有用信息。也就是说，如果脚本适合您，无论您的实现如何，即使在某些方面较差对于另一个实现，它是有效的。如果您没有确定成功功能的方法，那么您将始终丢失。）

但是，使用“延迟”需要更长的时间，直到脚本执行为止，为什么这样会更好？最后，正如您在图表中所看到的，它需要相同的组合时间。@Bergi，但是在执行

async

脚本时，页面呈现不是停止了吗？呈现从来没有停止过，我想您的意思是解析。即使是这样（实际上并不必要），这又有什么好处呢？为什么不早点执行脚本更好？@Bergi也许我误解了？我认为在解析过程中，页面元素被加载并显示在用户的屏幕上。如果解析在任何一点停止，那么页面元素的显示将花费更长的时间。我现在意识到，在所有解析和javascript执行完成之前，我们可能无法真正看到内容。对吗？不，解析意味着获取html流并生成文档对象。渲染（和绘制，即显示在屏幕上）与该过程并行，并且不一定受到影响（尽管它们通常等待较大的更改块）。内容第一次出现的时间取决于浏览器内部的许多内容。显示内容是否与javascript执行有关很大程度上取决于脚本的功能。这个答案是错误的。没有硬性规定。如果您有一个大js文件，下载速度比DomInteractive慢，那么使用“延迟”将导致浏览器在解析该脚本并发出DomContentLoaded之前等待该脚本下载。如果您有其他脚本正在等待此事件（例如jQuery），那么它们将不必要地等待您延迟的脚本下载。使用async可以避免这种情况。@calumbrodie如果您能为我的原始问题写下自己的答案，我会很高兴，因为我真的很想了解它是如何工作的！我很难理解你的解释，可能是因为我不知道所有的术语，因为我已经很久没有回顾过这些概念了。很多人都在看这个问题，所以正确的答案会很有帮助。我的理解也和卡伦布罗迪的一样，虽然还没有我想要的那么清楚。我认为普遍存在的误解与以下事实有关：没有一种一刀切的方法（这会让你以最快的速度找到FOO），而且每个人都用漂亮的图形作为例子，使用小文件和执行时间作为例子。如果脚本被缓存，它不需要下载，但仍然需要在domcontel之前执行