为什么要把JavaScript放在头脑中

时间:2011-11-23 21:01:31

标签: javascript html

如果在</body>之前放置JavaScript是完全可以接受的,那么将其保留在<head>中的理由是什么?

基于问题JavaScript in <head> or just before </body>? 许多答案表明如果你把它放在</body>标签之前,页面的加载速度会更快。

但是我没有看到为什么应该保留在<head>中的任何合理论据。我问,因为我不是一个非常强大的JavaScript开发人员,而且从我阅读和看到的所有内容来看,标准是将大多数JavaScript代码和外部引用保留在<head>中。

8 个答案:

答案 0 :(得分:32)

头部的任何东西都必须在加载主体之前完成,所以将javascript放在那里通常是一个坏主意。如果你在身体加载时需要某些东西,或者想要加速某些ajax,那么把它放在脑袋里是合适的。

答案 1 :(得分:6)

这背后的原因是Head被加载到正文之前。在加载时在正文中执行的任何动态javascript代码都将正确执行。

如果您的javascript位于</body>标记之前,那么在您加载页面时对网页所做的任何javascript调用都会出错。

所以是的,在</body>标记加载之前加入javascript会更快。但是,只有在您通过点击加载页面后才能执行javascript。

答案 2 :(得分:3)

如果您需要javascript在页面上完成某些操作,并且您不希望最终用户在完成之前看到内容,那么您应该将其包含在头部中。这实际上取决于每个案例。

大多数情况下,将其置于底部确实更适合优化页面下载,因为用户可以在JS开始下载之前查看页面上的所有内容。

答案 3 :(得分:2)

将JS置于脑海中的唯一理由是用于修改浏览器实际呈现页面的方式的脚本。例如,Modernizr.js被加载到头部,这样它就可以在页面开始渲染之前添加对HTML5元素的支持和操作<html>标记上的类。

否则,你的JS应该进入页面底部。

答案 4 :(得分:1)

过去,将JS置于脑海中的唯一理由是修改浏览器实际呈现页面的方式的脚本(如Chris Pratt指出的那样)。今天,情况已经不再如此了:

  • 如果您仍然非常关心IE&lt; 10中的支持和性能,那么它仍然是使您的脚本标记成为HTML正文的最后一个标记的最佳方法。这样,您就可以确定已经加载了其余的DOM,并且您不会阻止和渲染。

  • 如果您不再关心IE&lt; 10,那么您可能希望将脚本放在文档的头部并使用inline-block来确保它们仅在您的DOM之后运行已加载(defer)。这种方法的优点在于<script type="text/javascript" src="path/to/script1.js" defer></script>不会阻止加载其余的DOM。如果您仍然希望您的代码在IE&lt; 10中工作,请不要忘记将代码包装在defer中!

答案 5 :(得分:0)

head标签在Body之前加载,因此正确加载网站所需的Javascript应放在那里,但如果不需要,大多数人都认为最好将它放在body标签的末尾。 / p>

答案 6 :(得分:-1)

传统上页面并未用于验证(无论是XHTML严格验证还是WAI-AAA合规性,我都无法记住失败的确切内容,但是当脚本出现故障时,某些内容失败了在身体里)。这通常伴随着将所有脚本放入外部文件并使用脚本src =&#34;&#34;链接到它们的建议。标签。

逻辑: 也许W3C建议将其作为保留最大语义标记的主体的一种方式。我认为,从历史上看,这种逻辑在互联网通常慢得多的日子里很重要 - 一些浏览器被配置为拒绝基于互联网连接诊断的脚本和风格和图像。设置,并在头部有一个脚本是一种告诉浏览器的方式;如果连接问题需要它,那么可以拒绝这个脚本&#34;身体中的脚本在语义上被认为是内容的不可或缺的部分。这是一个细微差别,基于可能过时的W3C建议,所以我很难找到一个实际上以这种方式运行的浏览器。

现在它只会影响页面在渲染时的行为方式。

警告: 这不适用于不会影响首屏内容的脚本 - 最好通过放置它们来推迟加载就在关闭body标签之前,用户可以更快地看到上面的内容(无需等待加载渲染阻止脚本)。这是来自谷歌和雅虎的关键页面速度推荐

答案 7 :(得分:-5)

我认为像“windows”或“mac”这样的问题, 如果您将所有JS Source放在网站的Head部分中,那么您对W3C的退出是强有力的。 其他情况是头部必须加载到身体元素。并且正确加载DOM。 JavaScript框架(如jQuery)具有类似$(document).ready()的函数来检查完整的DOM是否已加载。 所以你可以在Head Tag中完成所有JS。 我的偏好是在主体末端加载所有JS,但这个决定将由每个开发人员自行决定:)