Script Tag - async & Defer

javascript html

2022-08-29 22:32:06

我对属性和标签有几个问题，据我所知，这些标签仅适用于HTML5浏览器。asyncdefer<script>

我的一个网站有两个外部JavaScript文件，目前位于标签上方;第一个是来自谷歌的jquery，第二个是本地外部脚本。</body>

关于网站加载速度

添加我在页面底部的两个脚本有什么好处吗？async
将选项添加到两个脚本并将它们放在页面顶部的？async<head>
这是否意味着他们在页面加载时下载？
我认为这会导致HTML4浏览器的延迟，但它会加快HTML5浏览器的页面加载速度吗？

用`<script defer src=...`

将两个脚本加载到具有属性的内容中是否会与之前具有脚本的影响相同？<head>defer</body>
我再次假设这会减慢HTML4浏览器的速度。

用`<script async src=...`

如果我有两个脚本已启用async

他们会同时下载吗？
还是一次一个页面的其余部分？
那么脚本的顺序会成为问题吗？例如，一个脚本依赖于另一个脚本，因此如果一个脚本下载得更快，则第二个脚本可能无法正确执行等。

最后，在HTML5更常用之前，我最好保持原样吗？

答案 1

此图说明了正常的脚本标记、异步和延迟

异步脚本在加载脚本后立即执行，因此它不能保证执行顺序（您在末尾包含的脚本可能会在第一个脚本文件之前执行）
延迟脚本保证它们在页面中出现的执行顺序。

参考此链接： http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

答案 2

在之前保留脚本。在某些情况下，Async 可以与位于那里的脚本一起使用（请参阅下面的讨论）。对于位于那里的脚本来说，延迟不会有太大的区别，因为DOM解析工作几乎已经完成了。</body>

下面是一篇文章，解释了异步和延迟之间的区别：http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/。

如果将脚本保留在正文的末尾，则 HTML 在较旧的浏览器中的显示速度会更快。因此，为了保持旧版浏览器中的加载速度，您不希望将它们放在其他任何地方。</body>

如果你的第二个脚本依赖于第一个脚本（例如，你的第二个脚本使用在第一个脚本中加载的jQuery），那么你不能在没有额外代码来控制执行顺序的情况下使它们异步，但你可以让它们延迟，因为延迟脚本仍将按顺序执行，直到文档被解析之后。如果您有该代码，并且不需要立即运行脚本，则可以使它们异步或延迟。

您可以将脚本放在标记中并将其设置为，脚本的加载将被推迟，直到DOM被解析，这将在支持延迟的新浏览器中快速显示页面，但它在较旧的浏览器中对您没有任何帮助，并且它实际上并不比将脚本放在所有浏览器中都有效的脚本更快。因此，您可以看到为什么最好将它们放在之前。<head>defer</body></body>

当您真的不关心脚本何时加载并且任何其他依赖于用户的脚本加载时，异步更有用。使用异步最常被引用的例子是像Google Analytics这样的分析脚本，你不希望等待任何东西，而且它不急于很快运行，它是独立的，所以没有其他任何东西依赖于它。

通常，jQuery 库不是异步的良好候选者，因为其他脚本依赖于它，并且您希望安装事件处理程序，以便您的页面可以开始响应用户事件，并且您可能需要运行一些基于 jQuery 的初始化代码来建立页面的初始状态。它可以使用异步，但其他脚本必须编码为在加载jQuery之前不执行。

Script Tag - async & Defer

关于网站加载速度

用<script defer src=...

用<script async src=...

用`<script defer src=...`

用`<script async src=...`