理想情况下，我希望以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>
我知道该属性只影响下载而不影响脚本的执行。
如何在下载后维持执行顺序？
答案 0 :(得分：4)
如果您希望脚本以异步方式下载但仍按顺序执行，请使用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 也会异步下载脚本，但下载完成后立即执行的每个脚本都会完成。因此，如果在大脚本下面包含一个小脚本，小脚本将更快下载并首先执行。
编辑＃2 （为清晰起见，编辑＃1被＃2取代）
当所有脚本从外部来源加载到defer时，使用<head>脚本非常有意义。下载是异步的，不会阻止DOM解析，并且维护执行顺序。好极了！我将这些称为延迟脚本。
然而，{/ 1}}中的内联脚本（<script>...</script>）会在 DOM解析期间同步下载并执行，因此他们赢了＆＃39;可以访问延迟脚本（因为那些不会在 DOM解析后执行）。
如果内联脚本需要访问库脚本，例如jQuery或lodash，该怎么办？显然，必须在内联脚本运行之前完全下载并执行这些库脚本。这是通过将{strong>库脚本放在<body> 中而不使用<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等等。）因为DOM已经加载< / EM>！