页面底部的JavaScript?

我读过最好把所有的JavaScript文件放在网页的底部。 HTML5 Boilerplate模板似乎同意: http ://html5boilerplate.com/

似乎被广泛使用。

我的问题是:第一,这是否有真正的基础? 我已经做了Firebug的testing,似乎有一些小的影响,但它是微不足道的? 图像和其他来源似乎并没有开始加载,直到CSS文件和脚本文件已经加载,但坚持他们在底部似乎没有太大的差异。

由于最佳实践原因,这非常重要。

当你的头文件加载脚本时,它们会停止发生其他下载! 这包括你的样式,并且也将停止你的图像下载,直到脚本完成。

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

另外请注意,如果您没有将JavaScript文件移动到页面底部,您将在加载过程中获得未格式化内容(FOUT)的闪光 。 这是因为在脚本完成加载之前,您的CSS不会下载。


这是雅虎绩效规则6的摘录。

由脚本引起的第二个问题是阻止并行下载。 HTTP / 1.1规范build议浏览器每个主机名并行下载至less两个组件。 如果您从多个主机名提供图像,则可以同时进行两个以上的下载。 (我已经获得Internet Explorer并行下载超过100个图像。)然而,一个脚本正在下载,但浏览器将不会启动任何其他下载,即使在不同的主机名。


参考

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

尤其要注意规则6 。

我们最近在办公室进行了辩论。 我写了一篇冗长的文章 ,就这个问题写下我的看法。 简单的答案是,这取决于你在做什么。 对于面向内容的网页,底部放置似乎效果最好。 但是,当创build以function性为主要优先级的Web应用程序时,放置在顶部具有优势。

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

基本上,当浏览器点击一个<script>标签时,它将停止加载文档的其余部分,直到该<script>被加载并执行。