脚本标记 - 异步和延迟

HTML5 Script Tag Async与Defer详解

最新推荐文章于 2024-03-15 11:29:59 发布

翻译最新推荐文章于 2024-03-15 11:29:59 发布 · 482 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://oldbug.net/q/jLgL/Script-Tag-async-defer

文章标签：

#javascript #html5

本文翻译自：Script Tag - async & defer

I have a couple of questions about the attributes async & defer for the <script> tag which to my understanding only work in HTML5 browsers. 我有几个关于<script>标签的async和defer属性的问题，据我所知，只能在HTML5浏览器中使用。

One of my sites has two external JavaScript files that currently sit just above the </body> tag; 我的一个网站有两个外部JavaScript文件，目前位于</body>标记的上方; the first is jquery sourced from google and the second is a local external script. 第一个是来自谷歌的jquery ，第二个是本地外部脚本。

With respects to site load speed 关于网站加载速度

Is there any advantage in adding async to the two scripts I have at the bottom of the page? 将async添加到页面底部的两个脚本中是否有任何优势？
Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the <head> ? 将async选项添加到两个脚本并将它们放在<head>页面的顶部是否有任何优势？
Would this mean they download as the page loads? 这是否意味着他们下载页面加载？
I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers? 我认为这会导致HTML4浏览器的延迟，但是它会加速HTML5浏览器的页面加载吗？

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

Would loading the two scripts inside <head> with the attribute defer the same affect as having the scripts before </body> ? 使用属性加载<head>的两个脚本是否会defer与</body>之前的脚本相同的影响？
Once again I assume this would slow up HTML4 browsers. 我再次假设这会降低HTML4浏览器的速度。

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

If I have two scripts with async enabled 如果我有两个启用了async脚本

Would they download at the same time? 他们会同时下载吗？
Or one at a time with the rest of the page? 或者与页面的其余部分一次一个？
Does the order of scripts then become a problem? 脚本的顺序是否会成为问题？ For example one script depends on the other so if one downloads faster, the second one might not execute correctly etc. 例如，一个脚本依赖于另一个脚本，因此如果下载速度更快，则第二个脚本可能无法正确执行等。

Finally am I best to leave things as they are until HTML5 is more commonly used? 最后，我最好保留原样，直到HTML5更常用？

#1楼

参考：https://stackoom.com/question/jLgL/脚本标记-异步和延迟

#2楼

Keep your scripts right before </body> . 在</body>之前保持脚本正确。 Async can be used with scripts located there in a few circumstances (see discussion below). 在某些情况下，Async可以与位于那里的脚本一起使用（参见下面的讨论）。 Defer won't make much of a difference for scripts located there because the DOM parsing work has pretty much already been done anyway. Defer不会对位于那里的脚本产生很大的影响，因为DOM解析工作已经完成了很多工作。

Here's an article that explains the difference between async and defer: http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ . 这篇文章解释了异步和延迟之间的区别： http ： //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 。

Your HTML will display quicker in older browsers if you keep the scripts at the end of the body right before </body> . 如果您在</body>之前将脚本保留在正文末尾，那么您的HTML将在旧版浏览器中更快地显示。 So, to preserve the load speed in older browsers, you don't want to put them anywhere else. 因此，为了保持旧版浏览器的加载速度，您不希望将它们放在其他任何位置。

If your second script depends upon the first script (eg your second script uses the jQuery loaded in the first script), then you can't make them async without additional code to control execution order, but you can make them defer because defer scripts will still be executed in order, just not until after the document has been parsed. 如果您的第二个脚本依赖于第一个脚本（例如，您的第二个脚本使用第一个脚本中加载的jQuery），那么您无法在没有其他代码来控制执行顺序的情况下使它们异步，但是您可以使它们延迟，因为延迟脚本将仍然按顺序执行，直到文档被解析后才执行。 If you have that code and you don't need the scripts to run right away, you can make them async or defer. 如果您拥有该代码并且不需要立即运行脚本，则可以使它们异步或延迟。

You could put the scripts in the <head> tag and set them to defer and the loading of the scripts will be deferred until the DOM has been parsed and that will get fast page display in new browsers that support defer, but it won't help you at all in older browsers and it isn't really any faster than just putting the scripts right before </body> which works in all browsers. 您可以将脚本放在<head>标记中并将它们设置为defer并且脚本的加载将推迟到解析DOM之后，并且将在支持延迟的新浏览器中显示快速页面，但它不会在旧版浏览器中对你提供帮助，并不比在所有浏览器中都能正常使用</body>之前的脚本快得多。 So, you can see why it's just best to put them right before </body> . 所以，你可以看到为什么最好把它们放在</body>之前。

Async is more useful when you really don't care when the script loads and nothing else that is user dependent depends upon that script loading. 当您在脚本加载时并不关心时，Async会更有用，并且用户所依赖的任何其他内容都不依赖于该脚本加载。 The most often cited example for using async is an analytics script like Google Analytics that you don't want anything to wait for and it's not urgent to run soon and it stands alone so nothing else depends upon it. 最常被引用的使用异步的示例是像Google Analytics这样的分析脚本，您不需要等待任何事情，并且不急于即将运行并且它是独立的，因此没有其他任何依赖它。

Usually the jQuery library is not a good candidate for async because other scripts depend upon it and you want to install event handlers so your page can start responding to user events and you may need to run some jQuery-based initialization code to establish the initial state of the page. 通常jQuery库不适合async，因为其他脚本依赖它并且你想安装事件处理程序，所以你的页面可以开始响应用户事件，你可能需要运行一些基于jQuery的初始化代码来建立初始状态的页面。 It can be used async, but other scripts will have to be coded to not execute until jQuery is loaded. 它可以用作异步，但是其他脚本必须编码才能在加载jQuery之前执行。

#3楼

HTML5: async , defer HTML5： async ， defer

In HTML5, you can tell browser when to run your JavaScript code. 在HTML5中，您可以告诉浏览器何时运行JavaScript代码。 There are 3 possibilities: 有三种可能性：

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

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

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

Without async or defer , browser will run your script immediately, before rendering the elements that's below your script tag. 如果没有async或defer ，浏览器将立即运行您的脚本，然后再渲染脚本标记下方的元素。
With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time. 使用async （异步），浏览器将继续加载HTML页面并在浏览器加载时呈现它并同时执行脚本。
With defer , browser will run your script when the page finished parsing. 使用defer ，浏览器将在页面完成解析后运行您的脚本。 (not necessary finishing downloading all image files. This is good.) （没必要完成下载所有图像文件。这很好。）

#4楼

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. async和defer脚本都会立即开始下载而不会暂停解析器，并且都支持可选的onload处理程序，以满足执行初始化的常见需求，这取决于脚本。

The difference between async and defer centers around when the script is executed. async和defer之间的区别在于脚本执行时的中心。 Each async script executes at the first opportunity after it is finished downloading and before the window's load event. 每个async脚本在完成下载后和窗口加载事件之前的第一个机会执行。 This means it's possible (and likely) that async scripts are not executed in the order in which they occur in the page. 这意味着async脚本可能（并且可能）不按页面中出现的顺序执行。 Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. 而另一方面， defer脚本保证按照它们在页面中出现的顺序执行。 That execution starts after parsing is completely finished, but before the document's DOMContentLoaded event. 解析完成后，但在文档的DOMContentLoaded事件之前，执行开始。

Source & further details: here . 来源及进一步细节：这里。

#5楼

async and defer will download the file during HTML parsing. async和defer将在HTML解析期间下载文件。 Both will not interrupt the parser. 两者都不会中断解析器。

The script with async attribute will be executed once it is downloaded. 具有async属性的脚本将在下载后执行。 While the script with defer attribute will be executed after completing the DOM parsing. 具有defer属性的脚本将在完成DOM解析后执行。
The scripts loaded with async does n't guarantee any order. 使用async加载的脚本不保证任何订单。 While the scripts loaded with defer attribute maintains the order in which they appear on the DOM. 加载defer属性的脚本维护它们在DOM上的显示顺序。

Use <script async> when the script does not rely on anything. 当脚本不依赖任何内容时，请使用<script async> 。 when the script depends use . 当脚本依赖使用时。

Best solution would be add the at the bottom of the body.There will be no issue with blocking or rendering. 最好的解决方案是添加在body的底部。阻塞或渲染没有问题。

UPDATE UPDATE

The answer has been corrected based on comments. 答案已根据评论予以纠正。

#6楼

This image explains normal script tag, async and defer 此图像解释了正常的脚本标记，异步和延迟

Async scripts are executed as soon as the script is loaded, so it doesn't guarantee the order of execution (a script you included at the end may execute before the first script file ) 加载脚本后立即执行异步脚本，因此不保证执行顺序（最后包含的脚本可能在第一个脚本文件之前执行）
Defer scripts guarantees the order of execution in which they appear in the page. 延迟脚本保证它们在页面中出现的执行顺序。

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