异步是否比推迟更好?

tor*_*inx 1 javascript html5

我理解它的方式,脚本应该defer编辑而不是async编辑,因为解析不需要停止执行它们(我将通过这些图表).如果解析必须停止,这意味着页面内容需要更长时间才能显示正确吗?如果是这样的话,为什么会async比这更好defer

示例:我在我的网站上使用Google reCAPTCHA.Google要求我在结束</head>标记之前插入脚本:

    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
Run Code Online (Sandbox Code Playgroud)

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

tor*_*inx 6

好吧,在网上搜了几个小时后,我终于得到了答案!从这篇精彩的博文:

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

...

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

然而:

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

所以基本上,我的理解是渲染(尽管它与解析并行发生)变得更快defer,但最终由于在整个渲染过程中执行所有javascripts,页面的加载时间也一样长.这对用户来说稍微令人满意,因为他们可以更快地看到事物.但是,如果我们真的想提高加载速度,我们应该尽可能在onload之后加载脚本.

总结:似乎没有任何理由使用async而不是defer.

  • 这个答案是错误的。没有硬性规定。如果您有一个较大的js文件,其下载速度将比DomInteractive慢,则使用defer将导致浏览器等待该脚本下载完成后再解析并发出DomContentLoaded。如果您有正在等待此事件的_other_脚本(例如jQuery),它们将不必要地等待您延迟的脚本下载。使用异步可以避免这种情况。 (3认同)