为什么要把JavaScript放在正确的位置

问题描述:

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

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

但是我没有看到为什么它应该保留在<head>的任何声音参数。我问,因为我不是一个非常强大的JavaScript开发人员,并且从我阅读和看过的所有内容中,标准是将大多数JavaScript代码和外部参考保留在<head>中。

任何头部都必须在身体加载之前完成,所以将javascript放在那里通常是一个坏主意。如果你需要需要一些东西,而身体正在加载,或者想加快一些AJAX,那么它是适当的,把它放在头上。

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

如果您的JavaScript正好在</body>标记之前,那么当您的页面加载时对JavaScript函数进行的任何JavaScript调用将会出错。

所以是在JavaScript之前的</body>标签加载速度会更快。但只有当您的JavaScript将在页面加载后通过点击执行时才会执行。

+0

把JS放在'

'标签中,这是什么,但最好的做法。有一些使用场景可能适用,但总体而言,“最佳做法”在“”之前。 –
+1

@Chris编辑了我的答案的那一部分。我的意思是说,关于何时放入'

'以及何时放入'',有不同的使用场景。我最后想说的不是把它放在头上而不是“最佳实践“这是我的一部分。 – Chris

如果您需要JavaScript来完成页面上的某些内容,并且您不希望最终用户在完成该内容之前查看内容,那么您应该将其包含在头部。这真的取决于每个个案。

大多数情况下,把它放在底部真的会更好地优化页面下载,因为在JS开始下载之前用户将看到页面上的所有内容。

这就像“windows”或“mac”这样的问题我认为, 如果你把所有的JS源代码都放在网站的Head Section中,那么你会退出W3C。 其他案例是在头部everthing必须加载befor身体元素。并且befor DOM被正确加载。 像jQuery这样的JavaScript框架有像$(document).ready()这样的函数来检查完整的DOM是否被加载。 所以你可以在头标中做所有的JS。 我的选择是在该机构的最终加载所有JS,但这一决定去每个开发者在自己的:)

+2

这......根本没有任何意义。特别是“你将退出W3C”。这些规范没有说明你需要将所有的脚本放在'

'中,这个问题不是关于意见的问题 - 有或没有做这件事的技术上有很好的理由,不仅仅是个人品味的问题,偏爱 –

理由把JS的头部是那些修改浏览器如何实际脚本呈现该页面。例如,Modernizr.js被加载到头部,以便在页面开始呈现之前,它可以执行诸如添加对HTML5元素的支持以及在<html>标记上操作类。

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

传统意义上页面没有用于验证(无论是XHTML严格验证还是符合WAI-AAA,我不记得确切地说失败了,但是当脚本在主体中时失败了)。这通常与将所有脚本放入外部文件并使用脚本src =“”标记链接到它们的建议一致。

逻辑:也许有人建议由W3C维持体内最语义标记的方式。我认为,从历史上看,这种逻辑在互联网普遍慢得多的日子里很重要 - 一些浏览器被配置为基于互联网连接诊断设置拒绝脚本和样式以及图像,并且头脑中有一个脚本告诉浏览器“如果连接性问题允许,拒绝这个脚本是可以的”,正文中的脚本在语义上被认为是对内容更积分的地方。尽管这是一个细微的差别,并且基于可能过时的W3C建议,所以我很难找到一个实际上这样运行的浏览器。

如今它只影响页面在呈现时的行为方式。

注意:这不应适用于不影响上面屏内容的脚本 - 更好地把他们刚刚结束标记之前,暂缓加载,使用户可以看到上面的折叠内容更快(无需等待渲染阻止脚本加载)。这是谷歌和雅虎的一个关键的页面速度推荐。

头部标签加载在身体之前,因此需要正确加载网站的Javascript应该放在那里,但如果不是这样,大多数人会觉得它更好把它放在身体标签的末尾。

过去,将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,但!