理想情况下，我希望所有脚本都以 HTML 顺序异步加载。据我所知，async 不是那样工作的。
使用以下属性，general.min.js 和 funcs.min.js 脚本不会运行，因为其中有一些 jQuery。
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js" async="async"></script>
<script type="text/javascript" src="scripts/general.min.js" defer="defer"></script>
<script type="text/javascript" src="scripts/funcs.min.js" defer="defer"></script>
我知道该属性只影响下载而不影响脚本的执行。
那么如何保持下载后的执行顺序呢？
最佳答案
如果您希望脚本异步下载但按顺序执行，请使用 defer .渲染不会被阻止，因为在解析文档之前不会开始执行脚本。
<script type="text/javascript" src="scripts/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript" src="scripts/general.min.js" defer></script>
<script type="text/javascript" src="scripts/funcs.min.js" defer></script>
另一方面，async 也会异步下载脚本，但它会在下载完成后立即执行每个脚本。因此，如果您在大脚本下面包含一个小脚本，小脚本将下载得更快并首先执行。
EDIT #2(为清楚起见，EDIT #1 被 #2 取代)
使用defer当所有脚本都加载到 <head> 中时，脚本很有意义来自外部来源。下载是异步的，DOM 解析不被阻塞，执行顺序保持不变。耶!我将这些称为延迟脚本。
但是，<script>...</script> 中的内联脚本 ( <body> )在 DOM 解析期间同步下载和执行，因此它们无法访问延迟脚本(因为那些脚本直到之后才执行DOM 解析)。
如果内联脚本需要访问库脚本，比如 jQuery 或 lodash，该怎么办？显然，那些库脚本 必须在内联脚本 运行之前完全下载并执行。这是通过将库脚本 放在<head> 中来完成的。 不使用 defer 。这使它们立即按顺序执行。请注意，延迟脚本 也可以访问库脚本，因为它们甚至在内联脚本 之后加载!
呸!这是一个例子:
<head>
<!-- Executed last: defered scripts -->
<script src="scripts/general.min.js" defer></script>
<script src="scripts/funcs.min.js" defer></script>
<!-- Executed first: library scripts, such as jquery, lodash, etc.. -->
<script src="scripts/jquery.min.js"></script>
</head>
<body>
<!-- Executed second: inline scripts -->
<script>
$.ready(console.log);
</script>
</body>
只是一个补充:延迟脚本不需要onload监听器(或 $.ready 等)因为 DOM 已经加载!
关于javascript - 异步脚本在延迟后执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46713457/