极客观点
项目管理
HarmonyOS
我有几个关于 async 标签的属性 defer 和 <script> 的问题，据我了解，这仅适用于 HTML5 浏览器。
我的一个网站有两个外部 JavaScript 文件，它们目前位于 </body> 标记的正上方；第一个是来自 google 的 jquery ，第二个是本地外部脚本。
关于网站加载速度
在页面底部的两个脚本中添加
async有什么好处吗？将
async选项添加到两个脚本并将它们放在页面顶部的<head>中会有什么好处吗？这是否意味着他们在页面加载时下载？
我认为这会导致 HTML4 浏览器延迟，但它会加快 HTML5 浏览器的页面加载速度吗？
使用 <script defer src=...
使用属性在
<head>中加载两个脚本会产生与在defer</body>加载脚本相同的影响吗？我再次假设这会减慢 HTML4 浏览器的速度。
使用 <script async src=...
如果我有两个启用 async 的脚本
他们会同时下载吗？
还是一次一个与页面的其余部分一起？
那么脚本的顺序会成为问题吗？例如，一个脚本依赖于另一个脚本，因此如果一个脚本下载速度更快，则第二个脚本可能无法正确执行，等等。
最后，在 HTML5 更常用之前，我最好保持原样吗？
原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议
将您的脚本放在
</body>之前。在少数情况下，异步可以与位于那里的脚本一起使用（参见下面的讨论）。 Defer 不会对位于那里的脚本产生太大影响，因为 DOM 解析工作几乎已经完成。这是一篇解释异步和延迟之间区别的文章：http: //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 。
如果您将脚本保留在正文末尾的
</body>之前，您的 HTML 将在旧浏览器中显示得更快。因此，为了保持旧浏览器的加载速度，您不想将它们放在其他任何地方。如果您的第二个脚本依赖于第一个脚本（例如，您的第二个脚本使用第一个脚本中加载的 jQuery），那么您不能在没有额外代码来控制执行顺序的情况下使它们异步，但您可以使它们延迟，因为延迟脚本会仍然按顺序执行，只是在文档被解析之后才执行。如果您有该代码并且不需要立即运行脚本，则可以使它们异步或延迟。
您可以将脚本放在
<head>标记中并将它们设置为defer，脚本的加载将被延迟，直到 DOM 被解析，这将在支持 defer 的新浏览器中快速显示页面，但它不会在较旧的浏览器中完全可以帮助您，并且实际上并不比将脚本放在适用于所有浏览器的</body>之前更快。因此，您可以了解为什么最好将它们放在</body>之前。当您真的不关心脚本何时加载并且没有其他用户依赖于该脚本加载时，异步会更有用。使用异步最常被引用的示例是像 Google Analytics 这样的分析脚本，您不想等待任何东西，并且很快运行并不急迫，它是独立的，所以没有其他东西依赖它。
通常 jQuery 库不适合异步，因为其他脚本依赖于它，并且您希望安装事件处理程序以便您的页面可以开始响应用户事件，并且您可能需要运行一些基于 jQuery 的初始化代码来建立初始状态的页面。它可以异步使用，但其他脚本必须在加载 jQuery 之前进行编码才能执行。