Jquery 脚本标记-异步&；推迟

我对

标签的

async

和

defer

属性有几个问题，据我所知，该标签只能在HTML5浏览器中使用

我的一个站点有两个外部JavaScript文件，当前位于

标记的正上方；第一个来自谷歌，第二个来自本地外部脚本

关于现场装载速度

在页面底部的两个脚本中添加

async

有什么好处吗

在这两个脚本中添加

async

选项并将它们放在

页面的顶部会有什么好处

这是否意味着他们会在页面加载时下载

我假设这会导致HTML4浏览器的延迟，但它会加速HTML5浏览器的页面加载吗

---

使用

将脚本放在
之前。Async可以在一些情况下与位于那里的脚本一起使用（参见下面的讨论）。延迟对位于那里的脚本没有多大影响，因为DOM解析工作已经基本完成了

下面有一篇文章解释了异步和延迟之间的区别：

如果您将脚本放在正文的末尾，就在
之前，您的HTML将在旧浏览器中显示得更快。因此，为了保持旧浏览器的加载速度，您不希望将它们放在其他任何地方

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

您可以将脚本放在
标记中，并将其设置为
defer
，脚本的加载将被延迟，直到DOM被解析，这将在支持defer的新浏览器中快速显示页面，但是，在旧浏览器中，它根本帮不上你的忙，而且它实际上并不比将脚本放在所有浏览器中都有效的
之前快。因此，您可以看到为什么最好将它们放在
之前

如果您真的不在乎脚本何时加载，并且用户依赖的任何内容都不依赖于该脚本加载，那么Async更有用。使用async最常被引用的例子是一个分析脚本，如Google analytics，您不需要等待任何东西，也不需要很快运行，它是独立的，因此没有其他依赖于它

通常，jQuery库不是异步的好选择，因为其他脚本依赖于它，并且您希望安装事件处理程序，以便您的页面可以开始响应用户事件，并且您可能需要运行一些基于jQuery的初始化代码来建立页面的初始状态。它可以异步使用，但在加载jQuery之前，其他脚本必须进行编码才能执行。
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
，浏览器将在呈现脚本标记下方的元素之前立即运行脚本

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

使用
defer
，当页面完成解析时，浏览器将运行脚本。（无需完成所有图像文件的下载。这很好。）

async
和
defer
脚本都可以在不暂停解析器的情况下立即开始下载，并且都支持可选的
onload
处理程序，以满足根据脚本执行初始化的常见需要

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

来源和更多详细信息：.
async
和
defer
将在HTML解析期间下载该文件。两者都不会中断解析器


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


使用
async
加载的脚本不保证任何顺序。而加载了
defer
属性的脚本保持它们在DOM上的显示顺序



当脚本不依赖任何内容时，请使用
。
当脚本依赖时，请使用

最好的解决方案是在主体底部添加
。阻止或呈现不会有问题。
此图解释了普通脚本标记、异步和延迟



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

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


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

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

[
    '//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);
});

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