脚本标签-异步和延迟

路易Davaid2020-03-12

我有一对夫妇的有关属性的问题async及defer对<script>标签，该标签在HTML5的浏览器我的理解只有工作。

我的一个网站有两个外部JavaScript文件，它们当前位于</body>标记上方；第一个是来自Google的jquery，第二个是本地外部脚本。

关于站点加载速度

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

使用 `<script defer src=...`

将<head>具有属性的两个脚本加载到内部将defer具有与之前拥有脚本相同的影响</body>？
我再次假设这会使HTML4浏览器变慢。

使用 `<script async src=...`

如果我async启用了两个脚本

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

最后，在HTML5更常用之前，我最好还是保持现状吗？

JimStafan2020/03/12 17:18:21

似乎defer和async的行为至少在执行阶段取决于浏览器。注意，推迟仅适用于外部脚本。我假设异步遵循相同的模式。

在IE 11及以下版本中，顺序似乎是这样的：

异步（在页面加载时可以部分执行）
无（可以在页面加载时执行）
延迟（在页面加载后执行，全部按文件中的放置顺序延迟）

在Edge，Webkit等中，async属性似乎被忽略或放置在末尾：

data-pagespeed-no-defer（在加载页面时，在执行任何其他脚本之前执行）
无（可以在页面加载时执行）
延迟（等到DOM加载后，全部按文件中的放置顺序延迟）
异步（似乎要等到DOM加载完毕）

在较新的浏览器中，data-pagespeed-no-defer属性在任何其他外部脚本之前运行。这适用于不依赖DOM的脚本。

注意：当需要外部脚本的明确执行顺序时，请使用defer。这告诉浏览器按照文件中的放置顺序执行所有延迟的脚本。

旁白：加载时外部javascript的大小确实很重要...但是对执行顺序没有影响。

如果您担心脚本的性能，则可能要考虑缩小或简单地使用XMLHttpRequest动态加载它们。

十三Itachi2020/03/12 17:18:21

Faced same kind of problem and now clearly understood how both will works.Hope this reference link will be helpful...

Async

When you add the async attribute to your script tag, the following will happen.

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>

Make parallel requests to fetch the files.
Continue parsing the document as if it was never interrupted.
Execute the individual scripts the moment the files are downloaded.

Defer

Defer与异步非常相似，但有一个主要区别。当浏览器遇到带有defer属性的脚本时，将发生以下情况。

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>

发出并行请求以获取单个文件。
继续解析文档，就好像它从未中断过一样。
即使脚本文件已下载，也要完成对文档的解析。
按照在文档中遇到的顺序执行每个脚本。

参考：异步和延迟之间的区别

JinJin乐逆天2020/03/12 17:18:21

async并将defer在HTML解析期间下载文件。两者都不会中断解析器。

具有async属性的脚本将在下载后执行。虽然带有defer属性的脚本将在完成DOM解析后执行。
加载的脚本async不保证任何顺序。当脚本加载了deferattribute时，它们将保持它们在DOM上的显示顺序。

使用<script async>时，脚本不依赖于任何东西。当脚本依赖使用时。

最好的解决方案是在主体底部添加。不会出现阻塞或渲染问题。

西里西门2020/03/12 17:18:21

两者async和defer脚本都立即开始下载，而不会暂停解析器，并且两者都支持可选的onload处理程序，以解决执行依赖于脚本的初始化的常见需求。

之间的差异async和defer中心执行脚本时左右。每个async脚本在完成下载后以及窗口的加载事件之前都将首先执行。这意味着async脚本有可能（并且很可能）没有按照它们在页面中出现的顺序执行。尽管defer脚本，而另一方面，保证在它们出现在页面的顺序来执行。该执行在解析完全完成之后但在文档DOMContentLoaded事件之前开始。

Source & further details: here.

StafanItachi2020/03/12 17:18:21

HTML5 ：async、defer

在HTML5中，您可以告诉浏览器何时运行JavaScript代码。有3种可能性：

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

不带async或defer，浏览器将在呈现script标记下方的元素之前立即运行您的脚本。
使用async（异步），浏览器将继续加载HTML页面并呈现它，而浏览器同时加载并执行脚本。
使用defer，页面解析完成后，浏览器将运行您的脚本。（不必完成所有图像文件的下载。这很好。）

神乐神乐2020/03/12 17:18:21

保持脚本正确</body>。在某些情况下，异步可以与位于此处的脚本一起使用（请参见下面的讨论）。Defer不会对位于此处的脚本产生太大的影响，因为DOM解析工作几乎已经完成。

这是一篇说明异步与延迟的区别的文章：http : //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/。

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

如果您的第二个脚本依赖于第一个脚本（例如，您的第二个脚本使用第一个脚本中加载的jQuery），那么如果没有其他代码来控制执行顺序，就无法使它们异步，但是您可以使它们延迟，因为延迟脚本会仍然可以按顺序执行，只是直到文档被解析之后。如果您具有该代码，并且不需要立即运行脚本，则可以使它们异步或延迟。

您可以将脚本放入<head>标记中并将其设置defer为，脚本的加载将推迟到DOM被解析之前，并且将在支持defer的新浏览器中快速显示页面，但对您完全没有帮助。在较旧的浏览器中，它并没有比</body>在所有浏览器中都能正确使用脚本快得多。因此，您可以了解为什么最好将它们放在前面</body>。

当您真的不在乎脚本何时加载，并且用户依赖的其他任何内容都不依赖于脚本加载时，异步会更有用。引用次数最多的使用异步的示例是Google Analytics（分析）之类的分析脚本，您不需要等待任何东西，而且也不是迫切需要立即运行，而且它独立存在，因此没有其他依赖于此的脚本。

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.