在底部而不是文档顶部加载JS的好处

Question

在文档底部加载JS有什么好处（如果有的话），而不是顶部。似乎页面加载和JS依赖功能有一个短暂的延迟。

我正在使用html5boilerplate来开始我的所有模板，但我不确定在底部加载JS有多么有用。

这真的会带来很大的不同吗？如果有，为什么呢？

Answer 1

1. 如果在页面底部包含外部js文件，则将HTTP请求的优先级提供给将呈现给客户端的可视显示，而不是交互或动态逻辑。我相信，如果您不使用内容传送网络将图像传送到客户端，那么您一次只能处理最多2个HTTP请求。您不希望将这些请求浪费在逻辑上，因为我们都知道最终用户是多么不耐烦。

2. 通过在文件的末尾加载js，您可以访问DOM（大多数时间），而无需调用document.ready（）函数。您知道，如果页面呈现最终使您的javascript代码通常已经加载了必要的页面元素。

还有一些原因，但是当我把所有的j放在底部感觉很尴尬的时候，这些是我试图记住的重要原因。

Answer 2

由于正在下载所引用的脚本，浏览器通常不会并行下载其他文件，从而减慢了页面加载速度。

参考：Best Practices for Speeding Up Your Web Site

Answer 3

Google搜索会返回大量结果，说明您为什么要这样做，以及您会看到哪些改进。查看以下链接中的一些：

• High Performance Web Sites: Rule 6 - Move Scripts to the Bottom
• Rails Best Practices: Scripts at Bottom

基本上，这样做的主要原因是您将改善页面的渲染时间。从第一篇文章：

  

[我]最好从脚本移动脚本   在页面中尽可能低到最低。   一个原因是使进步   渲染，但另一个是实现   更大的下载并行化。

Answer 4

取决于js中的内容。如果只是希望它在页面加载时通过jquery的$(function(){})包围您的代码，或者将其放在页面底部