页面底部的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应用程序时,顶部的位置具有优势.