我读过最好将所有 JavaScript 文件放在网页底部。HTML5 Boilerplate 模板似乎同意：http ://html5boilerplate.com/
并且似乎被广泛使用。
我的问题是：首先，这有什么真正的依据吗？我已经在 Firebug 中进行了测试，它似乎有一些小的影响，但它是微不足道的吗？在加载 CSS 文件和脚本文件之前，图像和其他来源似乎不会开始加载，但将它们放在底部似乎根本没有太大区别。
user1521604
问问题
12098 次
4 回答
28
出于最佳实践的原因，这非常重要。
当您在标题中加载脚本时，它们会阻止其他下载发生！这包括您的样式，并且还将停止您的图像下载，直到脚本完成。
这是因为 JavaScript 文件是同步加载的。
另请注意，如果您不将 JavaScript 文件移动到页面底部，则在加载过程中会出现一闪而过的无样式内容 (FOUT) 。这是因为您的 CSS 在脚本完成加载之前不会下载。
这是雅虎性能规则 6 的摘录。
由脚本引起的第二个问题是阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。（我让 Internet Explorer 可以并行下载 100 多个图像。）然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
参考
http://developer.yahoo.com/performance/rules.html/
特别注意规则 6。
于 2012-08-02T22:53:11.353 回答
16
我们最近在办公室进行了这场辩论。我写了一篇很长的帖子，在其中发表了我对这个主题的看法。简短的回答是，这真的取决于你在做什么。对于面向内容的网页，底部放置似乎效果最好。然而，当一个人在创建功能是主要优先级的 Web 应用程序时，放在顶部有它的优势。
于 2013-08-24T17:45:07.907 回答
3
JavaScript 同步加载。将其与通常较大的文件大小配对，并且您的内容由于同步 JavaScript 加载而延迟加载。如果您将 JavaScript 放在页面底部，则首先加载其他所有内容，并且 JavaScript 加载不会阻止任何内容。
于 2012-08-02T22:54:10.703 回答
1
基本上，当浏览器点击一个<script>标签时，它会停止加载文档的其余部分，直到它<script>被加载并执行。
于 2012-08-02T22:53:50.677 回答