为什么要将JavaScript放在页面的页脚中？

Question

所以我最近从ThemeForest购买并下载了一个模板。我在本地服务器上设置了模板。我使用codeigniter生成了导航，其中包含下拉菜单。我在菜单中的所有内容都正确编码。我只生成了标题，然后去测试它并意识到下拉菜单不起作用。我花了大约两个小时试图弄清楚我的代码出了什么问题。然后我终于意识到JavaScript文件包含在模板的页脚中......我还没有生成它。

所以我的问题是......为什么有人会将JavaScript文件放在HTML页面的页脚中？我认为JS应该只位于文件的标题中。正确？

Answer 1

您可以通过不同的方式将脚本文件加载到网页。

但是，在页面底部加载脚本具有以下优势。

1. 不会阻止任何要加载的DOM内容。
2. 所有DOM元素都可用于正在加载的脚本。
3. 如果您使用的是第三方库，例如jQuery，则可以跳过$(document).ready(function () {...});，因为DOM已经加载。

希望这有帮助。

Answer 2

Javascript可以在您网页的每个位置运行。不仅在标题中！

但是，最好将页面速度放在底部（在正文结束标记之前）。

  

脚本引起的问题是它们会阻止并行下载。 HTTP / 1.1规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。但是，在下载脚本时，即使在不同的主机名上，浏览器也不会启动任何其他下载。

Readmore： http://developer.yahoo.com/performance/rules.html#js_bottom

Answer 3

底部脚本的一个大问题是，您不能在页面中间放置任何脚本（这是动态生成的页面的问题）以及您要应用于页面上元素的任何特定于页面的脚本需要在您的库中加载后放入。例如，如果你需要加载一些ajax内容，你只能在加载底部JS后才能这样做。 因此，出于多种原因，人们更喜欢将库至少装在顶部（头部），然后只在脚上操纵JS