简体繁体 English

为什么要把JavaScript放在头脑中

[英]Why put JavaScript in head

原文 2011-11-23 21:01:30 9 8 javascript/ html

If it is perfectly acceptable to put JavaScript right before </body> what is a good reason to keep it in the <head> ? 如果在</body>之前放置JavaScript是完全可以接受的，那么将它保存在<head>中的理由是什么？

Based on the question JavaScript in <head> or just before </body>? 基于<head>中的JavaScript或</ body>之前的问题？ many answers state that the page will load faster if you put it right before the </body> tag. 许多答案表明如果你把它放在</body>标签之前，页面加载速度会更快。

However I don't see any sound arguments on why it should be kept in the <head> . 但是我没有看到为什么它应该保存在<head>中的任何声音。 I'm asking because I am not a very strong JavaScript developer and from everything I've read and seen, the standard is to keep most JavaScript code and external references in the the <head> . 我问，因为我不是一个非常强大的JavaScript开发人员，而且从我阅读和看过的所有内容来看，标准是将大多数JavaScript代码和外部引用保存在<head> 。

8 个解决方案

Anything in the head must be completed before the body is loaded, so it is generally a bad idea to put javascript in there. 头部的任何东西必须在加载主体之前完成，所以将javascript放在那里通常是个坏主意。 If you need something while the body is loading, or want to expedite some ajax, then it would be appropriate to put it in the head. 如果你在装载身体时需要一些东西，或者想要加速一些ajax，那么将它放在头部是合适的。

The reason behind this is as the Head gets loaded before the body. 这背后的原因是Head在身体前被加载。 Any dynamic javascript code that gets executed in the body on load will execute correctly. 在加载时在正文中执行的任何动态javascript代码都将正确执行。

If you have javascript that is just before the </body> tag then any javascript calls made to functions by your page as it loads will error. 如果您的javascript位于</body>标记之前，那么在加载时页面对函数进行的任何javascript调用都会出错。

So yes putting javascript before the </body> tag will load faster. 所以，在</body>标签加载之前加入javascript会更快。 But only if your javascript will be executed after page load via clicks for example. 但是，只有当您的javascript将在页面加载后通过点击执行时才会执行。

If you need the javascript to accomplish something on the page, and you don't want the end user to see the content until that's accomplished, then you should include it in the head. 如果您需要javascript来完成页面上的某些操作，并且您不希望最终用户在完成之前看到内容，那么您应该将其包含在头部中。 It really depends on each individual case. 这实际上取决于每个案例。

Most of the time, putting it at the bottom really IS better for optimizing page download, as the user will get to see all the content on the page before the JS even starts downloading. 大多数时候，将它放在最底层确实更适合优化页面下载，因为用户可以在JS开始下载之前查看页面上的所有内容。

The only reason to put JS in the head is for scripts that modify how the browser actually renders the page. 将JS置于脑海中的唯一原因是用于修改浏览器实际呈现页面的方式的脚本。 For example, Modernizr.js is loaded in the head so that it can do things like add support for HTML5 elements and manipulate classes on the <html> tag before the page begins to render. 例如，Modernizr.js被加载到头部，以便它可以执行诸如添加对HTML5元素的支持以及在页面开始呈现之前操作<html>标记上的类的操作。

Otherwise, your JS should be going in at the bottom of the page. 否则，您的JS应该进入页面底部。

In the past, the only reason to put JS in the head was for scripts that modify how the browser actually renders the page (as Chris Pratt pointed out). 在过去，将JS置于脑海中的唯一理由是修改浏览器实际渲染页面的脚本（正如Chris Pratt指出的那样）。 Today, that's no longer the case, though : 今天，情况不再如此：

If you still care a lot about support and performance in IE<10, it remains the best approach to make your script tags the last tags of your HTML body. 如果您仍然非常关心IE <10中的支持和性能，那么它仍然是使您的脚本标记成为HTML正文的最后一个标记的最佳方法。 That way, you're certain that the rest of the DOM has been loaded and you won't block and rendering. 这样，您就可以确定已经加载了其余的DOM，并且您不会阻止和渲染。
If you don't care too much anymore about IE<10, you might want to put your scripts in the head of your document and use defer to ensure they only run after your DOM has been loaded ( <script type="text/javascript" src="path/to/script1.js" defer></script> ). 如果你对IE <10不太在意，你可能想把你的脚本放在文档的头部并使用defer来确保它们只在你的DOM加载后运行（ <script type="text/javascript" src="path/to/script1.js" defer></script> ）。 The beauty of this approach, is that defer doesn't block loading the rest of the DOM. 这种方法的defer在于defer不会阻止加载其余的DOM。 If you still want your code to work in IE<10, don't forget to wrap your code in a window.onload even, though! 如果您仍然希望您的代码在IE <10中工作，请不要忘记将代码包装在window.onload ！

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

Traditionally pages didn't used to validate (be it XHTML Strict validation, or WAI-AAA compliance, I can't remember exactly what failed, but something failed when scripts were in the body). 传统上页面并不用于验证（无论是XHTML严格验证，还是WAI-AAA合规性，我都记不清楚失败了什么，但是当脚本在体内时出现了问题）。 This would usually go alongside the recommendation of putting all scripts into external files, and linking to them with a script src="" tag. 这通常与将所有脚本放入外部文件并使用脚本src =“”标记链接到它们的建议一起使用。

Logic: Perhaps it was recommended by the W3C as a way of preserving the body for the most semantic markup. 逻辑：也许W3C建议将其作为保留身体最大语义标记的一种方式。 I think also, historically, this logic was important in days when internet was generally a lot slower - some browsers were configured to reject scripts and styles and images based on internet connectivity diagnostics & settings, and having a script in the head is a way of telling browsers "it's OK to reject this script if connectivity issues warrant it" where as scripts in the body are semantically considered to be more integral to the content. 我认为，从历史上看，这种逻辑在互联网通常慢得多的日子里很重要 - 一些浏览器被配置为基于互联网连接诊断和设置拒绝脚本和样式和图像，并且头部中的脚本是一种方式告诉浏览器“如果连接问题需要它就可以拒绝这个脚本”，因为正文中的脚本在语义上被认为是对内容不可或缺的。 This is such a nuance though, and based on probably out-dated W3C recommendations, so I'd be hard-pressed to find a browser that actually operates in this way these days. 这是一个细微差别，并且基于可能过时的W3C建议，所以我很难找到这样实际以这种方式运行的浏览器。

Nowadays it's only to affect how the page behaves while rendering. 现在，它只会影响页面在渲染时的行为方式。

Caution: This shouldn't apply to scripts that don't affect above-the-fold content - better to defer their loading by putting them just before the closing body tag so that users can see the above-the-fold content quicker (without having to wait for render-blocking scripts to load). 注意：这不应该适用于不影响首屏内容的脚本 - 最好通过将它们放在结束体标记之前来推迟加载，以便用户可以更快地看到上面的内容（没有必须等待渲染阻止脚本加载）。 This is a key pagespeed recommendation from Google and Yahoo 这是来自谷歌和雅虎的关键页面速度推荐

Thats a Question like "windows" or "mac" I think, If you put all your JS Source in the Head Section of the Website your are quit strong to the W3C. 这就是像“windows”或“mac”这样的问题我认为，如果你把所有的JS Source放在网站的Head部分，那么你对W3C的态度是强烈的。 The Other Case is everthing in the Head must be loaded befor the body Element. 其他情况是头部必须加载到身体元素。 And befor the DOM is correctly loaded. 并且正确加载DOM。 JavaScript Frameworks like jQuery have Functions like $(document).ready() to check the complete DOM is loaded. JavaScript框架（如jQuery）具有类似$（document）.ready（）的函数来检查完整的DOM是否已加载。 So you could do all your JS in the Head Tag. 所以你可以在Head Tag中完成所有JS。 My Preference is to load all JS at the End of the Body but this decision goes to each Developer at its own :) 我的偏好是在身体的最后加载所有JS，但这个决定将由每个开发人员自己决定:)