Question

我理解它的方式，脚本应该是defer而不是async，因为这样解析不需要停止执行它们（我要经过these graphs）。如果必须停止解析，这意味着页面内容需要更长时间才能显示正确吗？如果是这种情况，为什么async会比defer更好？

示例：我在我的网站上使用Google reCAPTCHA。 Google要求我在结束</head>代码之前插入脚本：

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

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

Answer 1

好吧，在网上搜了几个小时后，我终于得到了答案！来自this fantastic blog post：

在下载资源时，会立即解析并执行加载ASYNC的脚本。而在完成HTML文档解析之前，DEFER脚本不会执行（AKA，DOM Interactive或performance.timing.domInteractive）。

...

比较ASYNC和DEFER瀑布，我们发现使用DEFER可以更快地激活DOM Interactive并允许渲染更快地进行。

但是：

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

所以基本上，我的理解是渲染（尽管it happens somewhat in parallel with parsing）随着defer变得更快，但最终页面的加载时间也一样长，因为所有的javascripts都在整个渲染过程。这对用户来说稍微令人满意，因为他们可以更快地看到事物。但是，如果我们真的想提高加载速度，我们应尽可能load scripts after onload。

总结：似乎没有任何理由使用async代替defer。

Answer 2

是的，异步有时是延迟的上乘选择，有时是次优的选择。通过计时，直到您关心的事件发生，避免使用异步或延迟（或加载，或按负载插入等），都可以轻松地对此进行测试。许多浏览器甚至附带内置的开发人员工具，向您显示定时事件的“ 瀑布”。

您提到的图形在概念上很漂亮并且很有用，但是它们并没有提供科学的度量。仅计算出您关心的事件发生的时间，才能始终（统计）准确地告诉您哪个是最快的。

您已经测试过某件事，或者您仅依赖信念。

（就Google reCAPTCHA而言，我并不十分了解它，但我确实知道，在某些实现中，它会通过各种可用的标准进行尝试（例如，甚至在与验证码]，以便提前确定该页面是否可能被实际的人使用。即使在页面完全加载之前，人们当然也会经常与它们进行交互，因此这段时间将提供有关此方面的有用信息。如果某个脚本无论您采用何种实现方式都对您有用，即使在某种程度上劣于另一种实现方式，它也会起作用。如果您没有确定成功功能的方法，那么您将永远迷失方向。）

异步是否比推迟更好？

2 个答案: