<head>中的JavaScript或</ body>之前的JavaScript？
[英]JavaScript in <head> or just before </body>?
问题描述
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: 
我即将开始一个新的Web项目，我打算使用以下方案将一些JavaScripts放在<head> ，还有一些放在</body>之前：
Scripts that are essential for the UX of the page: in the
<head>.对于页面的用户体验至关重要的脚本：在<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.因为我已经开始仔细阅读网页 - <head>中的脚本是在页面加载之前加载的，所以在那里放置对用户体验至关重要的脚本是有意义的。Scripts that are non-essential to the design and UX (Google Analytics scripts etc.): before the
</body>.对设计和UX（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. 另一种方法是将所有脚本放在<head> ，并将defer属性添加到非必要脚本中。 However, I read that older versions of Firefox don't pick up the defer attribute. 但是，我读到旧版本的Firefox没有获取defer属性。
6 个解决方案
解决方案1
30 已采纳 2011-10-13 08:51:19
I think a lot of developers run javascript just before the </body> so that it is ran after all the elements have been rendered. 我想很多开发人员都在</body>之前运行javascript，以便在渲染完所有元素之后运行它。
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 head tag. 然后可以将脚本引用放在head标记中。
Update - Script tags should be referenced just before </body> . 更新 - 应在</body>之前引用脚本标记。 This prevents render blocking while the scripts load and is much better for site perception speed. 这可以防止脚本加载时渲染阻塞，并且对于站点感知速度更好。
No obtrusive javascript should be used when using this technique. 使用此技术时，不应使用任何突兀的JavaScript。
解决方案2
13 2011-10-13 08:53:50
Javascript should be placed at the end of the document so that it doesn't delay the parallel loading of page elements. Javascript应该放在文档的末尾，这样它就不会延迟页面元素的并行加载。 This does then require that the js is written in a specific way but it does improve the speed of page loads. 这确实需要以特定方式编写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的引用也应该指向谷歌CDN。
See http://developer.yahoo.com/performance/rules.html for more info. 有关详细信息，请参阅http://developer.yahoo.com/performance/rules.html 。
解决方案3
4 2011-10-13 08:47:53
I'd say that's perfectly sensible. 我会说那是非常明智的。 As you said, as long as you don't move essential scripts (eg jQuery, Modernizr, etc etc) out from the <head> , you shouldn't have problems. 正如你所说，只要你不从<head>移出必要的脚本（例如jQuery，Modernizr等），你就不会有问题。
Moving non-essential scripts to the bottom of the page should help with the perceived loading speed (that and minimizing / concatenating scripts). 将非必要脚本移动到页面底部应该有助于感知加载速度（最小化/连接脚本）。
解决方案4
3 2011-10-13 08:59:34
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. 您希望在</body>之前放置脚本的原因之一是，如果他们在没有用户交互的情况下操作DOM，那么您需要加载DOM才能进行操作。 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. 将它们放在页面的末尾也会加快页面加载，但是在DOM操作脚本的情况下，你可能会得到一些不那么漂亮的结果。
解决方案5
1 2011-10-13 08:53:22
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. 我同意让modernizr早早出现，但不是所有东西都需要立即加载。 If you're trying to avoid a flash of unstyled text (FOUT), that's a good reason. 如果你试图避免闪烁无格式文本（FOUT），这是一个很好的理由。 Similarly, if you have scripts that affect how the page looks before the user does anything, you should load those early. 同样，如果您的脚本在用户执行任何操作之前影响页面的外观，则应尽早加载。
Don't forget though, speed is part of UX. 不要忘记，速度是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. 当用户无法看到它适用的内容时，准备运行一些jquery交互没有任何好处。 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. 如果您首先加载页面，则用户将使用这些秒来获取页面，从而允许您不显眼地加载脚本。
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. 如果将脚本移动到页面底部，您的页面加载速度会更快，这对您的Pagerank来说有所不同。
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所说，你的脚本应该存储在一个单独的文件中，并尽可能少地存储在文件中。
解决方案6
0 2011-10-13 08:49:10
将Javascript放在一个单独的文件中，并在HTML的头部放置一个链接。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.