脚本标签 - 异步和延迟

IT技术 javascript html
2021-01-19 03:48:19

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

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

关于网站加载速度

  1. 添加async到页面底部的两个脚本有什么好处吗？

  2. 将async选项添加到两个脚本并将它们放在<head>.

  3. 这是否意味着他们在页面加载时下载？

  4. 我认为这会导致 HTML4 浏览器的延迟，但它会加快 HTML5 浏览器的页面加载速度吗？

使用 <script defer src=...

  1. <head>使用属性加载里面的两个脚本是否会 与defer之前的脚本产生相同的影响</body>？
  2. 我再次假设这会减慢 HTML4 浏览器的速度。

使用 <script async src=...

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

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

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

6个回答

这张图片解释了普通的脚本标签、异步和延迟

在此处输入图片说明

  • 异步脚本在脚本加载后立即执行，因此不保证执行顺序（您最后包含的脚本可能会在第一个脚本文件之前执行）

  • Defer 脚本保证了它们出现在页面中的执行顺序。

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

这确实帮助我更好地理解。
2021-03-12 03:48:19
@writofmandamus 看起来async会赢。参见stackoverflow.com/questions/13821151/...
2021-04-02 03:48:19
如果你不放async或者defer它仍然会按那个顺序加载。
2021-04-03 03:48:19
谢谢你的好解释。但是，图像不是按比例缩放的。在只有<script>标签的情况下，页面加载的总长度比下载脚本文件所需的时间更长。
2021-04-05 03:48:19
我认为一个包含多个脚本的例子会更好地说明它们的顺序
2021-04-06 03:48:19

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

这里有一篇文章解释了 async 和 defer 之间的区别：http : //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/。

如果您将脚本放在正文末尾的</body>. 因此，为了保持旧浏览器的加载速度，您不想将它们放在其他任何地方。

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

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

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

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

“如果你的第二个脚本依赖于第一个脚本......那么你不能让它们异步或延迟”——这不是真的，它们会按顺序执行。
2021-03-16 03:48:19
@Nate - 它不会使您的文档加载速度更快，这是我的观点。您是正确的，它可以更快地改善加载脚本，但它也可能减慢文档及其内容的加载速度，因为您正在使用一些带宽并使用浏览器与给定服务器建立的有限连接之一加载脚本，同时它也在尝试加载您的内容。
2021-03-20 03:48:19
在这一点上，自 2012 年发布此答案以来，浏览器开发实际上并不需要 </body> 要求。
2021-03-22 03:48:19
你说将脚本放入head并设置它们defer不会比将它们放入之前更快</body>，但从我读到的内容来看这是不正确的。想想看——如果你把脚本放在 中<head>，那么它们将立即开始下载，而如果它们正好在此之前，</body>那么所有其他元素都会首先下载。
2021-03-23 03:48:19
Defer 应该仍然按顺序运行它们，但在 dom-contentloaded 之前运行。这不是说把它放在脑袋里会更快，因为它可以在解析 body html 之前开始下载它们吗？
2021-03-31 03:48:19

HTML5: async,defer

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

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

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

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

  1. 如果没有asyncor defer，浏览器将立即运行您的脚本，然后渲染脚本标记下方的元素。

  2. 使用async（异步），浏览器将继续加载 HTML 页面并呈现它，同时浏览器加载和执行脚本。

  3. 使用defer，浏览器将在页面完成解析时运行您的脚本。（没必要把所有的图片文件都下载完。这样就好了。）

async-脚本执行的那一刻，他们已经下载的，没有考虑到他们在HTML文件中的顺序。
2021-03-12 03:48:19
注意：不能保证脚本会按照使用 Async 指定的顺序运行。“因此，如果您的第二个脚本依赖于第一个脚本，请避免异步。”
2021-03-17 03:48:19
是的，我相信情况确实如此。
2021-03-17 03:48:19
async=""在验证和保存模板更改之前需要 blogger.com 模板。
2021-03-18 03:48:19

这两个async和defer脚本立即开始下载无需暂停解析器且均支持可选的onload处理程序，以解决共同需要执行初始化依赖于脚本。

async和之间的区别defer集中在执行脚本的时间。每个async脚本在下载完成后和窗口加载事件之前第一时间执行。这意味着async脚本有可能（并且很可能）没有按照它们在页面中出现的顺序执行。而另一方面，defer脚本保证按照它们在页面中出现的顺序执行。该执行在解析完全完成后开始，但在文档DOMContentLoaded事件之前开始。

来源和更多细节：在这里。

面临同样的问题，现在清楚地了解两者的工作原理。希望此参考链接会有所帮助...

异步

当您将 async 属性添加到脚本标记时，将发生以下情况。

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
  1. 发出并行请求以获取文件。
  2. 继续解析文档，就好像它从未被中断过一样。
  3. 在下载文件时执行各个脚本。

推迟

Defer 与 async 非常相似，但有一个主要区别。下面是当浏览器遇到带有 defer 属性的脚本时会发生什么。

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. 发出并行请求以获取单个文件。
  2. 继续解析文档，就好像它从未被中断过一样。
  3. 即使已下载脚本文件，也要完成对文档的解析。
  4. 按照在文档中遇到的顺序执行每个脚本。

参考：Async 和 Defer 的区别

其它你可能感兴趣的问题
上一篇JavaScript 控制台中的颜色 下一篇jQuery 的 jquery-1.10.2.min.map 正在触发 404（未找到）