为什么将JavaScript放在<head>标签中?

48

如果在</body>标签前放置JavaScript是完全可以接受的,那么为什么要将其放在<head>中呢?

根据问题“<head>标签中的JavaScript代码和</body>标签前的有何不同?”的回答,许多人认为如果您把它放在</body>标签之前,页面会更快地加载。

然而,我没有看到任何合理的论点说明为什么应该将其保留在<head>中。我提出这个问题是因为我不是非常擅长JavaScript开发,并且从我所读到和了解的所有内容来看,标准做法是将大多数JavaScript代码和外部引用保留在<head>中。

8个回答

37
任何head部分的内容都必须在body加载之前完成,因此通常不建议将javascript放在head中。如果您需要在body加载时进行某些操作或想要加快一些ajax,则将其放在head中是适当的。

7
这是因为在加载正文之前会先加载标签。如果有任何动态的JavaScript代码在加载时在中执行,将会正确执行。
如果你将JavaScript放在</body>标签之前,那么页面加载时调用函数的任何JavaScript调用都将出错。
所以说,如果你的JavaScript将通过点击等方式在页面加载后执行,将JavaScript放在</body>标签之前会更快地加载。

把JS放在<head>标签中并不是“最佳实践”。虽然有一些使用场景可能适合这样做,但总体而言,“最佳实践”是在</body>之前。 - Chris Pratt
1
@Chris 我已经编辑掉了我的回答中的那部分。我的意思是,在什么情况下放置<head></body>是不同的使用场景。我最后想说的是,不要忽视将其放在头部而不是“最佳实践”,这是我的疏忽。 - Chris

5
如果您需要使用javascript完成页面上的某些操作,并且在完成之前不希望最终用户看到内容,则应将其包含在head中。这确实取决于每个单独的情况。
大多数情况下,将其放在底部确实更好地优化页面下载,因为用户将在JS开始下载之前就能看到页面上的所有内容。

4

将JS放在head中的唯一原因是为了修改浏览器实际呈现页面的脚本。例如,Modernizr.js被加载到head中,以便它可以执行诸如添加对HTML5元素的支持和在页面开始呈现之前操作<html>标签上的类等操作。

否则,您的JS应该放在页面底部。


3

过去,将JS放在头部的唯一原因是为了修改浏览器实际渲染页面的脚本(正如Chris Pratt所指出的那样)。但现在不再是这种情况:

  • 如果你仍然非常关心IE<10的支持和性能,最好的方法是将脚本标签放在HTML文档体的最后,这样你就可以确保DOM的其他部分已经被加载,并且不会阻塞渲染。

  • 如果你不再太关心IE<10,你可能想将脚本放在文档的头部,并使用defer来确保它们在DOM加载完成后才运行(<script type="text/javascript" src="path/to/script1.js" defer></script>)。这种方法的美妙之处在于,defer不会阻塞加载DOM的其他部分。如果你仍然希望你的代码在IE<10中工作,请别忘了将你的代码包装在window.onload中!


0
标签在之前加载,因此需要加载网站的Javascript应放置在那里,但如果不需要,大多数人认为最好将其放置在标签的末尾。

-1

传统上,页面通常不进行验证(无论是XHTML严格验证还是WAI-AAA合规性,我记不清具体哪个失败了,但当脚本位于正文中时,某些内容会失败)。这通常会伴随着将所有脚本放入外部文件并使用script src =“”标签链接到它们的建议。

逻辑:也许W3C推荐这种方式是为了保留最语义化的标记。我认为,从历史上看,在互联网速度普遍较慢的日子里,这种逻辑非常重要-一些浏览器根据互联网连接诊断和设置拒绝脚本、样式和图像,而在头部中有一个脚本是告诉浏览器“如果连接问题需要,可以拒绝此脚本”,而正文中的脚本在语义上被认为更加与内容相结合。然而,这只是一个微妙之处,基于可能过时的W3C建议,因此我很难找到现在实际以这种方式运作的浏览器。

现在,它仅影响页面在呈现时的行为。

注意:这不适用于不影响以上折叠内容的脚本,最好将它们推迟到接近关闭主体标签之前加载,以便用户可以更快地查看以上折叠内容(无需等待渲染阻塞脚本加载)。这是来自谷歌和雅虎的页面速度建议。


-5
那是一个类似于"windows"或者"mac"的问题,我想。 如果你把所有的JS源代码放在网页的Head部分,你就对W3C相当强大了。 另一种情况是,在body元素加载之前,Head中的所有内容都必须被加载。而且DOM正确加载之前也要加载完成。 像jQuery这样的JavaScript框架有类似$(document).ready()的函数来检查完整的DOM是否已经加载。 因此,你可以将所有的JS代码放在Head标签中。 我的偏好是将所有的JS代码加载到Body结束的地方,但这个决定由每个开发人员自己去做 :)

3
这段话一点也不合理,特别是“你对W3C非常强大”的那句话。规范并没有要求您将所有脚本放在<head>中,这个问题也不是关于观点的问题——有非常好的技术原因来决定是否这样做,而不仅仅是个人品味和偏好的问题。 - Yi Jiang

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接