为什么将 JavaScript 放在页面的页脚中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16391348/
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
Why put JavaScript in the footer of a page?
提问by ShoeLace1291
So I recently bought and downloaded a template from ThemeForest. I set up the template on my local server. I generated the navigation, which has dropdown menus, with codeigniter. I had everything in the menu coded correctly. I only had the header generated and went to test it out and realized the dropdown menus were not working. I spent about two hours trying to figure out what was wrong with my code. Then I finally realized that the JavaScript files were included in the footer of the template... which I had not yet generated.
所以我最近从 ThemeForest 购买并下载了一个模板。我在本地服务器上设置了模板。我使用 codeigniter 生成了带有下拉菜单的导航。我把菜单中的所有东西都正确编码了。我只生成了标题并去测试它并意识到下拉菜单不起作用。我花了大约两个小时试图找出我的代码出了什么问题。然后我终于意识到 JavaScript 文件包含在模板的页脚中……我还没有生成。
So my question is... why would someone put JavaScript files in the footer of an HTML page? I thought that JS was only supposed to be located in the header of the file. Right?
所以我的问题是……为什么有人会将 JavaScript 文件放在 HTML 页面的页脚中？我认为 JS 只应该位于文件的标题中。对？
回答by Chandu Dexter
There are different ways you could load a script file to a web page.
有多种方法可以将脚本文件加载到网页。
But loading scripts at bottom of you page have the following advantages.
但是在页面底部加载脚本具有以下优点。
- Will not block any DOM content to be loaded.
- All the DOM elements will be available for the scripts that are being loaded.
- If you are using third-party libraries such as jQuery, you can skip the
$(document).ready(function () {...});as the DOM is already loaded.
- 不会阻止任何要加载的 DOM 内容。
- 所有 DOM 元素都可用于正在加载的脚本。
- 如果您使用第三方库，例如 jQuery，您可以跳过
$(document).ready(function () {...});DOM ，因为 DOM 已经加载。
Hope this helps.
希望这可以帮助。
回答by Anh Tú
Javascript can run every where in your page. not only in header!
Javascript 可以在页面的任何地方运行。不仅在标题中！
But, best for your page speed is put script at bottom (before body closing tag).
但是，最适合您的页面速度的是将脚本放在底部（在正文结束标记之前）。
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.
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
Readmore: http://developer.yahoo.com/performance/rules.html#js_bottom
阅读更多：http: //developer.yahoo.com/performance/rules.html#js_bottom
回答by Tr-evor H-awes
The big problem with scripts at the bottom is that you cannot have any scripts in the middle of the page (which is a problem with dynamically generated pages) and any page-specific script you want to apply to elements on the page you need to put after loading in your libraries. If, for example you need to load in some ajax content you can only do that after the bottom JS has been loaded. So for many reasons people prefer to have the libraries at least loaded at the top (head) then only put manipulating JS at the foot
底部脚本的一个大问题是页面中间不能有任何脚本（这是动态生成的页面的问题）和任何要应用于页面上需要放置的元素的特定于页面的脚本在您的库中加载后。例如，如果您需要加载某些 ajax 内容，则只能在加载底部 JS 后执行此操作。因此，出于多种原因，人们更喜欢至少在顶部（头部）加载库，然后只将操作 JS 放在脚下
