JavaScript 在 <head> 中还是在 </body> 之前？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7751514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript in <head> or just before </body>?
提问by timkl
I am about to embark on a new web project and I plan to put some JavaScripts in the <head>and also some before </body>, using the following scheme:
我即将开始一个新的网络项目，我计划使用以下方案将一些 JavaScript 放入<head>和 之前 中</body>：
Scripts that are essential for the UX of the page: in the
<head>. As I've picked up perusing the web - scripts in the<head>is loaded before the page loads, so it would make sense to put scripts that are essential to the user experience there.Scripts that are non-essential to the design and UX (Google Analytics scripts etc.): before the
</body>.
对页面 UX 至关重要的脚本：在
<head>. 由于我已经开始仔细阅读网页 - 在<head>页面加载之前加载脚本中的脚本，因此将用户体验必不可少的脚本放在那里是有意义的。对设计和用户体验不重要的脚本（Google Analytics 脚本等）：在
</body>.
Is this a sensible approach?
这是一种明智的做法吗？
Another approach would be to put all the scripts in the <head>and add defer attributes to the non-essential scripts. However, I read that older versions of Firefox don't pick up the defer attribute.
另一种方法是将所有脚本放在 中<head>，并将 defer 属性添加到非必要脚本中。但是，我读到旧版本的 Firefox 没有选择 defer 属性。
采纳答案by Curt
I think a lot of developers run javascript just before the </body>so that it is ran after all the elements have been rendered.
我认为很多开发人员在 javascript 之前运行，</body>以便在所有元素都被渲染之后运行。
However, if you organise your code correctly, the position on the page doesn't matter.
但是，如果您正确组织代码，则页面上的位置无关紧要。
For example, when using jQuery, you can ensure the code isn't ran until the page and its elements are fully rendered by doing the following:
例如，在使用 jQuery 时，您可以通过执行以下操作来确保在页面及其元素完全呈现之前不会运行代码：
$(document).ready(function(){
//Code here
});
Then the script reference can be put in the headtag.
然后可以将脚本引用放入head标记中。
Update - Script tags should be referenced just before </body>. This prevents render blocking while the scripts load and is much better for site perception speed.
Update-Script 标签应该在 之前被引用</body>。这可以防止在脚本加载时呈现阻塞，并且对于站点感知速度来说要好得多。
No obtrusive javascript should be used when using this technique.
使用此技术时不应使用任何突兀的 javascript。
回答by Digbyswift
Javascript should be placed at the end of the document so that it doesn't delay the parallel loading of page elements. This does then require that the js is written in a specific way but it does improve the speed of page loads.
Javascript 应该放在文档的末尾，这样它就不会延迟页面元素的并行加载。这确实需要以特定方式编写 js，但它确实提高了页面加载速度。
Also, ideally you could host references like this under a different (sub)domain. References to jquery should be pointed to googles CDN too.
此外，理想情况下，您可以在不同的（子）域下托管这样的引用。对 jquery 的引用也应该指向 googles CDN。
See http://developer.yahoo.com/performance/rules.htmlfor more info.
有关更多信息，请参阅http://developer.yahoo.com/performance/rules.html。
回答by Conan
I'd say that's perfectly sensible. As you said, as long as you don't move essential scripts (e.g. jQuery, Modernizr, etc etc) out from the <head>, you shouldn't have problems.
我会说这是非常明智的。正如您所说，只要您不将基本脚本（例如 jQuery、Modernizr 等）从<head>.
Moving non-essential scripts to the bottom of the page should help with the perceived loading speed (that and minimizing / concatenating scripts).
将非必要的脚本移动到页面底部应该有助于感知加载速度（以及最小化/连接脚本）。
回答by Nikoloff
One of the reasons you'd want to put scripts before the </body>is if they manipulate the DOM without user interaction, so you'll need the DOM to be loaded in order to be manipulated. Another way to do that is to add an event listener and run the scripts when the page has loaded, but this will require additional code, which might get complicated if you have a lot of scripts, especially ones you haven't written yourself. Putting them at the end of the page also will speed up page load, though in the case of DOM manipulating scripts you might get some not-so-pretty results from that.
您希望将脚本放在 之前的原因之一</body>是如果它们在没有用户交互的情况下操作 DOM，因此您需要加载 DOM 才能进行操作。另一种方法是添加一个事件侦听器并在页面加载时运行脚本，但这将需要额外的代码，如果您有很多脚本，尤其是您没有自己编写的脚本，这可能会变得复杂。将它们放在页面末尾也将加快页面加载速度，但在 DOM 操作脚本的情况下，您可能会从中获得一些不太漂亮的结果。
回答by daveyfaherty
It all depends on what you mean by "essential for UX". I agree with having modernizr appear early for example, but not everything needs to load straight away. If you're trying to avoid a flash of unstyled text (FOUT), that's a good reason. Similarly, if you have scripts that affect how the page looks before the user does anything, you should load those early.
这一切都取决于您所说的“对用户体验至关重要”的含义。例如，我同意让 Modernizr 尽早出现，但并非所有内容都需要立即加载。如果您想避免一闪而过的无样式文本 (FOUT)，这是一个很好的理由。同样，如果您的脚本会在用户执行任何操作之前影响页面的外观，则应尽早加载这些脚本。
Don't forget though, speed is part of UX. There's no advantage in having some jquery interaction ready to run when the user can't see the content it applies to yet. The difference between loading the scripts at the start of the end is a matter of seconds. If you let the page load first, the user will be using those seconds to take the page in, allowing you to load scripts unobtrusively.
但不要忘记，速度是用户体验的一部分。当用户还看不到它适用的内容时，让一些 jquery 交互准备好运行没有任何好处。在结束时加载脚本之间的差异是几秒钟的事情。如果您让页面先加载，用户将使用这几秒钟来加载页面，从而允许您不显眼地加载脚本。
Your page will load faster if you move scripts to the bottom of the page, and that makes a difference to your pagerank these days.
如果您将脚本移到页面底部，您的页面加载速度会更快，这会对您的页面排名产生影响。
Also, some versions of IE will throw errors if you try to run a script before the element it refers to has loaded.
此外，如果您尝试在引用的元素加载之前运行脚本，某些版本的 IE 将引发错误。
Like Ed says, your scripts should be stored in a separate file, and in as few files as possible.
就像 Ed 说的那样，你的脚本应该存储在一个单独的文件中，并且尽可能少地存储在文件中。
回答by Ed Heal
Put the Javascript in a seperate file and place a link to it in the head part of HTML.
将 Javascript 放在一个单独的文件中，并在 HTML 的头部部分放置一个指向它的链接。
