页面底部的JavaScript？

Question

我已经读过，最好将所有JavaScript文件保存在网页的底部。 HTML5 Boilerplate模板似乎同意：http://html5boilerplate.com/

似乎被广泛使用。

我的问题是：首先，这是否有任何实际依据？我已经在Firebug中进行了测试，它似乎有一些小的影响，但它是否微不足道？在CSS文件和脚本文件加载之前，图像和其他来源似乎没有开始加载，但是将它们粘在底部似乎没有太大的区别。

Answer 1

出于最佳做法原因这一点非常重要。

当您在标题中加载脚本时，它们会阻止其他下载的发生！这包括您的样式，并且还会阻止您的图像下载，直到脚本完成。

这是因为JavaScript文件同步加载。

另请注意，如果您未将JavaScript文件移至页面底部，则在加载过程中将获得flash of unstyled content (FOUT)。这是因为在脚本加载完成之前，您的CSS不会下载。

---

以下是雅虎表现规则6的摘录。

  

脚本导致的第二个问题是阻止并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。 （我已经让Internet Explorer并行下载了100多个图像。）然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。

---

<强>参考

http://developer.yahoo.com/performance/rules.html/

特别注意rule 6。

Answer 2

我们最近在办公室进行了这次辩论。我写了a lengthy post，在那里我对这个问题发表了看法。简短的回答是，它真的取决于你正在做什么。对于面向内容的网页，底部放置似乎效果最好。但是，当创建以功能为主要优先级的Web应用程序时，顶部的位置有其优势。

Answer 3

JavaScripts同步加载。将其与通常较大的文件大小配对，并且由于同步JavaScript加载，您的内容在加载时会延迟。如果您将JavaScripts放在页面底部，那么首先加载其他所有内容，并且JavaScript加载不能阻止任何内容。

Answer 4

基本上，当浏览器点击<script>标记时，它会停止加载文档的其余部分，直到加载并执行<script>为止。