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

Question

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

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

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

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

• 使用async已经在底部的js文件除了执行它们的顺序之外会有什么不同吗？

Answer 1

查看脚本的HTML 5.2规范,可以看到W3C使用的这个插图.

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

async另一方面,在解析的同时取出,一旦获取完成,HTML渲染就会暂停以执行脚本.

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

然而,正如Chris Moschini所说,我不相信defer.我觉得这个 StackOverflow作为一个整体的答案可以更好地解释如何defer影响加载JavaScripts.

Answer 2

defer 属性是一个布尔属性。

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

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