这张图片解释了正常的脚本标签，异步和延迟

异步脚本在加载脚本时立即执行，因此 不能保证执行的顺序(在 end可能在第一个脚本文件之前执行) 延迟脚本保证了它们出现的执行顺序 在页面中。

参考这个链接:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

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，浏览器将在页面完成解析时运行您的脚本。(没有必要下载完所有图像文件。这很好。)

好的做法是将所有文件保存在源文件夹中，以便快速加载源文件。你需要下载所有的脚本，样式，图标和图像相关的文件，并把这些文件放入你的项目文件夹。

在项目中创建这些文件夹以保存不同的源文件，然后从这些文件夹中将所需的文件加载到页面中。

Js:保存脚本相关文件。

Css:保存与样式相关的文件。

Img:保存图像/图标相关文件

字体:保存字体相关文件

何时使用defer和async属性

defer属性:首先下载脚本文件，然后等待html解析。html解析结束后，脚本将执行。换句话说，它将保证在html解析之后执行所有脚本。

当脚本用于DOM操作时，Defer属性非常有用。意味着脚本将应用于文档html。

async属性:它将下载脚本文件并执行，而不等待html解析结束。换句话说，它不能保证在html解析之后执行所有脚本。

当脚本不用于DOM操作时，Async属性非常有用。有时，您只需要脚本进行服务器端操作或处理缓存或cookie，而不需要用于DOM操作。意味着脚本与所使用的html无关。

使用defer和async时的有用链接: https://stackoverflow.com/a/68929270/7186739

如果您的脚本不包含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将立即执行。

这张图片解释了正常的脚本标签，异步和延迟

异步脚本在加载脚本时立即执行，因此 不能保证执行的顺序(在 end可能在第一个脚本文件之前执行) 延迟脚本保证了它们出现的执行顺序 在页面中。

参考这个链接:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html