页面底部的JavaScript？

Question

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

并且似乎被广泛使用。

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

Answer 1

出于最佳实践原因，这一点非常重要。

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

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

另请注意，如果您不将JavaScript文件移动到页面底部，则会在加载过程中获得无格式内容（FOUT） 。 这是因为在脚本加载完成之前，您的CSS不会下载。

---

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

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

---

参考

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

特别注意规则6 。

Answer 2

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

Answer 3

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

Answer 4

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