我应该在底部正文标记之前的脚本上使用延迟吗？

Question

每次我将js文件放在页面底部时，这个问题一直困扰着我。如果我在关闭body标签之前将所有js文件放在底部，那么我认为浏览器将首先下载所有html和样式表，然后它将解析html和css，最后它将发送js请求文件。所以，

• 在已经位于底部的js文件上使用defer会有什么不同吗？
• 在正文标记呈现阻止之前，非延迟脚本是否在最后？

我遇到的另一个问题是，如果我将所有js文件放在头部并在其上使用defer。这相当于将所有js文件放在底部吗？会在head浏览器中看到js延迟向服务器发出请求，然后继续下载其余的html文件，还是只在下载了所有html和css之后才向服务器发出请求？

据我所知async相当于defer，唯一的区别是js将在不考虑文件顺序的情况下下载时执行。所以，

• 在已经位于底部的js文件上使用async会产生什么不同，除了它们执行的顺序？

Answer 1

通过HTML 5.2 spec查看脚本，可以找到{3}} W3C使用。

我们在这里看到的是，在解析HTML时使用defer获取脚本，但是等到解析在执行之前结束。

另一方面，

async与解析一起取出，一旦提取完成，HTML渲染就会暂停以执行脚本。

由于HTML执行是同步的，因此可以假设在defer之前放置的脚本上使用</head>几乎就像将它们放在</body>之前。

但是，正如this illustration所述，我不相信defer。我觉得Chris Moschini StackOverflow作为一个整体的答案可以更好地解释defer如何影响加载JavaScripts。

Answer 2

defer属性是一个布尔属性。

如果存在，则指定在页面完成解析时执行脚本。

注意：defer属性仅适用于外部脚本（仅当存在src属性时才应使用）。

Answer 3

我发现这篇帖子很好地说明了这一点：https://flaviocopes.com/javascript-async-defer/

理想情况下，最佳实践是在中添加