Jquery 代码应该放在页眉还是页脚中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2105327/
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
Should Jquery code go in header or footer?
提问by Simone
Where is the best place to put Jquery code (or separate Jquery file)? Will pages load faster if I put it in the footer?
放置 Jquery 代码（或单独的 Jquery 文件）的最佳位置在哪里？如果我把它放在页脚中，页面加载速度会更快吗？
采纳答案by Chad Levy
All scripts should be loaded last
所有脚本都应该最后加载
In just about every case, it's best to place all your script references at the end of the page, just before </body>.
在几乎所有情况下，最好将所有脚本引用放在页面末尾，就在</body>.
If you are unable to do so due to templating issues and whatnot, decorate your script tags with the deferattribute so that the browser knows to download your scripts after the HTML has been downloaded:
如果由于模板问题等原因而无法这样做，请使用该defer属性装饰您的脚本标签，以便浏览器知道在下载 HTML 后下载您的脚本：
<script src="my.js" type="text/javascript" defer="defer"></script>
Edge cases
边缘情况
There are some edge cases, however, where you may experience page flickering or other artifacts during page load which can usually be solved by simply placing your jQuery script references in the <head>tag withoutthe deferattribute. These cases include jQuery UI and other addons such as jCarousel or Treeview which modify the DOM as part of their functionality.
但是，在某些极端情况下，您可能会在页面加载期间遇到页面闪烁或其他伪像，这通常可以通过简单地将 jQuery 脚本引用放置在没有该属性的<head>标记中来解决。这些案例包括 jQuery UI 和其他插件，例如 jCarousel 或 Treeview，它们将 DOM 作为其功能的一部分进行修改。defer
Further caveats
进一步的警告
There are some libraries that must be loaded before the DOM or CSS, such as polyfills. Modernizr is one such library that must be placed in the head tag.
有一些库必须在 DOM 或 CSS 之前加载，例如 polyfills。Modernizr 就是这样一个必须放在 head 标签中的库。
回答by eozzy
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上。在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。
一个经常出现的替代建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会延迟，但不会像您期望的那样延迟。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。
EDIT:Firefox does support the DEFER attribute since version 3.6.
编辑：Firefox 从 3.6 版开始支持 DEFER 属性。
Sources:
资料来源：
回答by virtualeyes
Only load jQuery itself in the head, via CDN of course.
只在头部加载 jQuery 本身，当然是通过 CDN。
Why? In some scenarios you might include a partial template (e.g. ajax login form snippet) with embedded jQuery dependent code; if jQuery is loaded at page bottom, you get a "$ is not defined" error, nice.
为什么？在某些情况下，您可能包含带有嵌入式 jQuery 相关代码的部分模板（例如 ajax 登录表单片段）；如果 jQuery 在页面底部加载，则会出现“$ 未定义”错误，很好。
There are ways to workaround this of course (such as not embedding any JS and appending to a load-at-bottom js bundle), but why lose the freedom of lazily loaded js, of being able to place jQuery dependent code anywhere you please? Javascript engine doesn't care where the code lives in the DOM so long as dependencies (like jQuery being loaded) are satisfied.
当然，有一些方法可以解决这个问题（例如不嵌入任何 JS 并附加到底部加载的 js 包），但是为什么会失去延迟加载 js 的自由，能够将 jQuery 依赖代码放置在您喜欢的任何地方？Javascript 引擎不关心代码在 DOM 中的位置，只要依赖项（如加载的 jQuery）得到满足。
For your common/shared js files, yes, place them before </body>, but for the exceptions, where it really just makes sense application maintenance-wise to stick a jQuery dependent snippet or file reference right there at that point in the html, do so.
对于您的公共/共享 js 文件，是的，将它们放在 之前</body>，但对于例外情况，在应用程序维护方面将 jQuery 相关代码段或文件引用粘贴在 html 中的那个点确实有意义的情况下，这样做。
There is no performance hit loading jquery in the head; what browser on the planet does not already have jQuery CDN file in cache?
头部加载jquery没有性能命中；世界上哪个浏览器没有缓存中的 jQuery CDN 文件？
Much ado about nothing, stick jQuery in the head and let your js freedom reign.
无所事事，把 jQuery 放在头上，让你的 js 自由统治。
回答by EMP
Nimbuzprovides a very good explanation of the issue involved, but I think the final answer depends on your page: what's more important for the user to have sooner - scripts or images?
Nimbuz对所涉及的问题提供了很好的解释，但我认为最终答案取决于您的页面：对于用户来说，更重要的是尽快拥有什么 - 脚本还是图像？
There are some pages that don't make sense without the images, but only have minor, non-essential scripting. In that case it makes sense to put scripts at the bottom, so the user can see the images sooner and start making sense of the page. Other pages rely on scripting to work. In that case it's better to have a working page without images than a non-working page with images, so it makes sense to put scripts at the top.
有些页面没有图像就没有意义，但只有次要的、非必要的脚本。在这种情况下，将脚本放在底部是有意义的，这样用户就可以更快地看到图像并开始理解页面。其他页面依靠脚本来工作。在这种情况下，没有图像的工作页面比带有图像的非工作页面更好，因此将脚本放在顶部是有意义的。
Another thing to consider is that scripts are typically smaller than images. Of course, this is a generalisation and you have to see whether it applies to your page. If it does then that, to me, is an argument for putting them first as a rule of thumb (ie. unless there's a good reason to do otherwise), because they won't delay images as much as images would delay the scripts. Finally, it's just much easier to have script at the top, because you don't have to worry about whether they're loaded yet when you need to use them.
另一件要考虑的事情是脚本通常比图像小。当然，这是一个概括，您必须查看它是否适用于您的页面。如果确实如此，那么对我来说，这是将它们放在首位作为经验法则的论据（即，除非有充分的理由否则），因为它们不会像图像延迟脚本那样延迟图像。最后，在顶部放置脚本要容易得多，因为当您需要使用它们时，您不必担心它们是否已加载。
In summary, I tend to put scripts at the top by default and only consider whether it's worthwhile moving them to the bottom after the page is complete. It's an optimisation - and I don't want to do it prematurely.
总之，我倾向于默认将脚本放在顶部，只考虑在页面完成后将它们移到底部是否值得。这是一种优化 - 我不想过早地进行。
回答by Stefan Kendall
Most jquery code executes on document ready, which doesn't happen until the end of the page anyway. Furthermore, page rendering can be delayed by javascript parsing/execution, so it's best practice to put all javascript at the bottom of the page.
大多数 jquery 代码在文档就绪时执行，无论如何直到页面结束才会发生。此外，页面呈现可能会因 javascript 解析/执行而延迟，因此最好将所有 javascript 放在页面底部。
回答by Robert Harvey
Standard practice is to put all of your scripts at the bottom of the page, but I use ASP.NET MVC with a number of jQuery plugins, and I find that it all works better if I put my jQuery scripts in the <head>section of the master page.
标准做法是将所有脚本放在页面底部，但我使用 ASP.NET MVC 和许多 jQuery 插件，我发现如果我将 jQuery 脚本放在<head>master 部分，效果会更好页。
In my case, there are artifacts that occur when the page is loaded, if the scripts are at the bottom of the page. I'm using the jQuery TreeView plugin, and if the scripts are not loaded at the beginning, the tree will render without the necessary CSS classes imposed on it by the plugin. So you get this funny-looking mess when the page first loads, followed by the proper rendering of the TreeView. Very bad looking. Putting the jQuery plugins in the <head>section of the master page eliminates this problem.
就我而言，如果脚本位于页面底部，则在加载页面时会出现工件。我正在使用 jQuery TreeView 插件，如果在开始时没有加载脚本，树将在没有插件强加给它的必要 CSS 类的情况下呈现。所以当页面第一次加载时，你会看到这个看起来很有趣的混乱，然后是 TreeView 的正确呈现。很不好看。将 jQuery 插件放在<head>母版页的部分可以消除这个问题。
回答by Mujah Maskey
Although almost all web sites still place Jquery and other javascript on header :D , even check stackoverflow.com .
尽管几乎所有网站仍然将 Jquery 和其他 javascript 放在标题 :D 上，甚至检查 stackoverflow.com。
I also suggest you to put on before end tag of body. You can check loading time after placing on either places. Script tag will pause your webpage to load further.
我还建议你在身体的结束标签之前穿上。您可以在放置在任何地方后检查加载时间。脚本标签将暂停您的网页以进一步加载。
and after placing javascript on footer, you may get unusual looks of your webpage until it loads javascript, so place css on your header section.
在页脚上放置 javascript 后，在加载 javascript 之前，您可能会看到网页的异常外观，因此将 css 放在页眉部分。
回答by Soufiane Hassou
回答by user3094826
For me jQuery is a little bit special. Maybe an exception to the norm. There are so many other scripts that rely on it, so its quite important that it loads early so the other scripts that come later will work as intended. As someone else pointed out even this page loads jQuery in the head section.
对我来说，jQuery 有点特别。也许是常态的例外。有很多其他脚本依赖它，因此尽早加载它非常重要，以便稍后出现的其他脚本将按预期工作。正如其他人指出的那样，即使这个页面在头部部分加载了 jQuery。
