我应该在已经位于底部正文标记之前的脚本上使用 defer 吗？

Question

每次我把自己的js文件放在页面底部的时候，这个问题一直困扰着我。如果我将所有 js 文件放在关闭 body 标记之前的底部，那么我认为浏览器将首先下载所有 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 的Scripting，发现this illustration W3C 使用。

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

另一方面，async 在解析的同时进行抓取，一旦抓取完成，HTML 渲染就会暂停以执行脚本。

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

但是，正如Chris Moschini 所说，我不会相信defer。我觉得this StackOverflow 的回答作为一个整体会更好地解释defer 如何影响加载 JavaScript。

Answer 2

defer 属性是一个布尔属性。

当存在时，它指定当页面完成解析时执行脚本。

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

Answer 3

我找到的这篇文章解释得很好：https://flaviocopes.com/javascript-async-defer/

理想情况下，最佳实践是将