JavaScript 在页面底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11786915/
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 on the bottom of the page?
提问by Undefined
I've read that it is better to keep all of your JavaScript files on the bottom of the webpage. The HTML5 Boilerplate template seems to agree: http://html5boilerplate.com/
我读过最好将所有 JavaScript 文件保存在网页底部。HTML5 Boilerplate 模板似乎同意：http://html5boilerplate.com/
And seems to be widely used.
并且似乎被广泛使用。
My question is: first, does this have any real basis? I've done testing in Firebug and it seems to have some small effect, but is it trivial? Images and other sources don't seem to start loading until CSS files and script files have loaded, but sticking them on the bottom doesn't seem to make much difference in this at all.
我的问题是：首先，这有什么实际依据吗？我已经在 Firebug 中进行了测试，它似乎有一些小影响，但它是微不足道的吗？在加载 CSS 文件和脚本文件之前，图像和其他来源似乎不会开始加载，但将它们粘贴在底部似乎根本没有太大区别。
回答by Undefined
It is very important for best practice reasons.
出于最佳实践的原因，这非常重要。
When you have scripts loading in your header, they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.
当您在标题中加载脚本时，它们会阻止其他下载发生！这包括您的样式，并且还将阻止您的图像下载，直到脚本完成。
This is because JavaScript files load synchronously.
这是因为 JavaScript 文件是同步加载的。
Also note that you will get a flash of unstyled content (FOUT)during loading if you do not move your JavaScript files to the bottom of your page. This is because your CSS will not download until the script has finished loading.
另请注意，如果您不将 JavaScript 文件移动到页面底部，您将在加载过程中看到一闪而过的无样式内容 (FOUT)。这是因为在脚本完成加载之前您的 CSS 不会下载。
Here is an excerpt from Yahoo performance rule 6.
这是雅虎性能规则 6 的摘录。
The second problem caused by scripts is blocking 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. (I've gotten Internet Explorer to download over 100 images in parallel.) While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
脚本引起的第二个问题是阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。（我已经让 Internet Explorer 并行下载 100 多个图像。）然而，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上。
References
参考
http://developer.yahoo.com/performance/rules.html/
http://developer.yahoo.com/performance/rules.html/
Especially note rule 6.
特别注意规则 6。
回答by VangelisB
We recently had this debate at the office. I wrote a lengthy postwhere I lay down my opinion on the subject. The short answer is that it really depends on what you're making. For content oriented web pages, bottom placement seems to work best. However when one is creating web applications where functionality is the main priority, placement at the top has it's advantages.
我们最近在办公室进行了这场辩论。我写了一篇很长的文章，在此发表我对这个主题的看法。简短的回答是，这真的取决于你在做什么。对于面向内容的网页，底部放置似乎效果最好。但是，当创建以功能为主要优先事项的 Web 应用程序时，放置在顶部具有其优势。
回答by wanovak
JavaScripts load synchronously. Pair that with generally larger file sizes, and you have content that is being delayed in loading because of the synchronous JavaScript loading. If you put the JavaScripts at the bottom of the page, then everything else is loaded first and the JavaScript loading can't block anything.
JavaScript 同步加载。将它与通常较大的文件大小配对，并且由于同步 JavaScript 加载，您的内容加载延迟。如果您将 JavaScript 放在页面底部，那么其他所有内容都会首先加载，并且 JavaScript 加载无法阻止任何内容。
回答by ahren
Basically, when the browser hits a <script>tag, it stops loading the rest of the document until that <script>is loaded and executed.
基本上，当浏览器点击一个<script>标签时，它会停止加载文档的其余部分，直到<script>加载并执行为止。
