async和defer脚本都立即开始下载，而不需要暂停解析器，并且都支持可选的onload处理程序，以满足执行初始化(依赖于脚本)的常见需求。

The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

来源和更多细节:这里。

看起来defer和async的行为是依赖于浏览器的，至少是在执行阶段。说明“defer”仅适用于外部脚本。我假设async遵循相同的模式。

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

异步(可以在页面加载时部分执行) 无(可以在页面加载时执行) 延迟(在页面加载后执行，所有延迟在文件中的位置顺序)

在Edge, Webkit等中，async属性似乎要么被忽略，要么被放在末尾:

data-page - speed-no-defer(在加载页面时，在任何其他脚本之前执行) 无(可以在页面加载时执行) 延迟(等待DOM加载，所有延迟在文件中的位置顺序) async(似乎等待DOM加载)

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

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

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

如果您担心脚本的性能，那么您可能需要考虑缩小或使用XMLHttpRequest动态加载它们。

async和defer脚本都立即开始下载，而不需要暂停解析器，并且都支持可选的onload处理程序，以满足执行初始化(依赖于脚本)的常见需求。

The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

来源和更多细节:这里。

HTML5:异步，延迟

在HTML5中，你可以告诉浏览器什么时候运行JavaScript代码。有三种可能:

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

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

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

没有async或defer，浏览器会立即运行你的脚本，在呈现脚本标签下面的元素之前。 使用async(异步)，浏览器将继续加载HTML页面并在浏览器加载和执行脚本的同时呈现它。 使用defer，浏览器将在页面完成解析时运行您的脚本。(没有必要下载完所有图像文件。这很好。)

面对同样的问题，现在清楚地了解两者将如何工作。希望这个参考链接会有帮助…

异步

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

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

发出并行请求来获取文件。 继续解析文档，就像它从未被打断过一样。 文件下载后立即执行各个脚本。

推迟

延迟与异步非常相似，但有一个主要区别。下面是浏览器遇到带有defer属性的脚本时会发生的情况。

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

进行并行请求以获取单个视频文件。 继续解析文档，就像它从未被打断过一样。 即使已经下载了脚本文件，也要完成文档解析。 按照文档中出现的顺序执行每个脚本。

参考:异步和延迟的区别

如果您的脚本不包含DOM操作，而其他脚本不依赖于此，则Async是合适的。 例如:bootstrap cdn,jquery

如果您的脚本包含DOM操作，而其他脚本依赖于此，那么Defer是合适的。

例如:<script src= " createfirst.js " > //让这将创建元素<script src= " showfirst.js " > //在createfirst创建元素后，它将显示。

这样就可以: 例如:<script defer src= " createfirst.js " > //let this will create element <script defer src= " showfirst.js " > //在createfirst.js创建元素后，它将

这将按顺序执行脚本。

但如果我做出: 例如:<script async src= " createfirst.js " > //let this will create element <script defer src= " showfirst.js " > //在createfirst.js创建元素后，它将

然后，这段代码可能会产生意想不到的结果。 因为:如果html解析器访问createfirst脚本。它不会停止创建DOM，而是开始从src下载代码。一旦src被解析/代码被下载，它将立即与DOM并行执行。

如果showfirst.js比createfirst.js先执行，这可能是可能的，如果createfirst需要很长时间(假设在DOM解析结束后)。然后，showfirst将立即执行。