脚本标签-异步和延迟

2020/09/24 01:01 · javascript ·  · 0评论

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

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

关于站点加载速度

  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更常用之前,我最好还是保持现状吗?

保持脚本正确</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之前执行。

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

在此处输入图片说明

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

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

引用此链接:http : //www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

HTML5 :asyncdefer

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

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

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

<script defer src="myscript.js"></script>
  1. 不带asyncdefer,浏览器将在呈现script标记下方的元素之前立即运行您的脚本。

  2. 使用async(异步),浏览器将继续加载HTML页面并呈现它,而浏览器同时加载并执行脚本。

  3. 使用defer,网页解析完成后,浏览器将运行您的脚本。(不必完成所有图像文件的下载。这很好。)

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

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

来源和更多详细信息:此处

面对同样的问题,现在已经清楚地了解了两者的工作原理,希望该参考链接对您有所帮助...

异步

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

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

延期

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

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

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

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

  • 具有async属性的脚本将在下载后执行。虽然带有defer属性的脚本将在完成DOM解析后执行。

  • 加载的脚本async不保证任何顺序。当脚本加载了deferattribute时,它们会保持它们在DOM上的显示顺序。

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

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

我认为,杰克·阿奇博尔德(Jake Archibald)早在2013年就向我们提供了一些见解,这些见解可能会对该主题产生更大的积极性:

https://www.html5rocks.com/zh-CN/tutorials/speed/script-loading/

圣杯正在立即下载一组脚本,而不会阻止渲染,并按添加顺序尽快执行。不幸的是,HTML讨厌您,并且不允许您这样做。

(...)

答案实际上是在HTML5规范中,尽管它隐藏在脚本加载部分的底部。async IDL属性控制元素是否将异步执行。如果设置了元素的“ force-async”标志,则异步IDL属性在获取时必须返回true,而在设置时必须返回“ force-async”必须首先取消设置标志... ”。

(...)

动态创建并添加到文档的脚本默认情况下是异步的,它们不会阻止渲染并在下载后立即执行,这意味着它们可能以错误的顺序出现。但是,我们可以将它们明确标记为不异步:

[
    '//other-domain.com/1.js',
    '2.js'
].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

这使我们的脚本混合了普通HTML无法实现的行为。通过显式不异步,脚本被添加到执行队列中,与我们在第一个纯HTML示例中添加的脚本相同。但是,通过动态创建它们,它们可以在文档解析之外执行,因此在下载它们时不会阻止渲染(不要将非异步脚本加载与sync XHR混淆,这从来都不是一件好事)。

上面的脚本应内联包含在页面的开头,应尽快对脚本下载进行排队,而不会破坏渐进式渲染,并应按指定的顺序尽快执行。“ 2.js”可在“ 1.js”之前免费下载,但要等到“ 1.js”成功下载并执行或无法执行后才能执行。欢呼!异步下载但命令执行

不过,这可能不是加载脚本的最快方法:

(...)在上面的示例中,浏览器必须解析并执行脚本以发现要下载的脚本。这会在预加载扫描仪中隐藏您的脚本。浏览器使用这些扫描器在您下一步可能访问的页面上发现资源,或者在解析器被其他资源阻止时发现页面资源。

我们可以通过将其添加到文档的开头来重新添加可发现性:

<link rel="subresource" href="//other-domain.com/1.js">
<link rel="subresource" href="2.js">

这告诉浏览器页面需要1.js和2.js。link [rel = subresource]与link [rel = prefetch]类似,但语义不同。不幸的是,它目前仅在Chrome中受支持,您必须声明要加载两次的脚本,一次是通过链接元素,一次是在脚本中。

更正:我最初说这些是由预加载扫描仪拾取的,不是,而是由常规解析器拾取的。但是,预加载扫描程序可能无法进行预加载,而可执行代码中包含的脚本永远无法预加载。感谢Yoav Weiss在评论中纠正了我。

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

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

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

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

  • data-pagespeed-no-defer(在页面加载时先于其他脚本执行)
  • 无(可以在页面加载时执行)
  • 延迟(等待直到DOM加载,所有延迟均按文件中的放置顺序进行)
  • 异步(似乎要等到DOM加载完毕)

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

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

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

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

本文地址:http://javascript.askforanswer.com/jiaobenbiaoqian-yibuheyanchi.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!