本文翻译自:Script Tag - async & defer
I have a couple of questions about the attributes async
& defer
for the tag which to my understanding only work in HTML5 browsers. 我有几个关于
标签的
async
和defer
属性的问题,据我所知,只能在HTML5浏览器中使用。
One of my sites has two external JavaScript files that currently sit just above the
tag; 我的一个网站有两个外部JavaScript文件,目前位于标记的上方; the first is jquery sourced from google and the second is a local external script. 第一个是来自谷歌的jquery ,第二个是本地外部脚本。
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 ? 将
async
选项添加到两个脚本并将它们放在页面的顶部是否有任何优势?
使用
with the attribute defer
the same affect as having the scripts before
? 使用属性加载
的两个脚本是否会defer
与
之前的脚本相同的影响?
使用
If I have two scripts with async
enabled 如果我有两个启用了async
脚本
Finally am I best to leave things as they are until HTML5 is more commonly used? 最后,我最好保留原样,直到HTML5更常用?
参考:https://stackoom.com/question/jLgL/脚本标记-异步和延迟
Keep your scripts right before . 在
之前保持脚本正确。 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 . 如果您在
之前将脚本保留在正文末尾,那么您的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 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 which works in all browsers. 您可以将脚本放在
标记中并将它们设置为
defer
并且脚本的加载将推迟到解析DOM之后,并且将在支持延迟的新浏览器中显示快速页面,但它不会在旧版浏览器中对你提供帮助,并不比在所有浏览器中都能正常使用之前的脚本快得多。 So, you can see why it's just best to put them right before
. 所以,你可以看到为什么最好把它们放在
之前。
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之前执行。
HTML5: async
, defer
HTML5: async
, defer
In HTML5, you can tell browser when to run your JavaScript code. 在HTML5中,您可以告诉浏览器何时运行JavaScript代码。 There are 3 possibilities: 有三种可能性:
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.) (没必要完成下载所有图像文件。这很好。)
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 . 来源及进一步细节: 这里 。
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 when the script does not rely on anything. 当脚本不依赖任何内容时,请使用
。 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. 答案已根据评论予以纠正。
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