网页底部/顶部的JavaScript？答案

【问题标题】：JavaScript at bottom/top of web page?网页底部/顶部的JavaScript？
【发布时间】：2009-10-28 17:08:31
【问题描述】：

我只是在 Mozilla Firefox 中使用插件“Yslow”，它告诉我应该将 JavaScript 放在底部。我以前听说过这个，但并没有真正考虑太多。与顶部相比，将 JavaScript 置于网页底部真的有优势吗？

【问题讨论】：

如果 Javascript 在单独的文件中怎么办？我更喜欢这种方式，仅仅是因为它更容易调试/阅读。这是加载更快/更慢吗？
你可以直接找到这个的源代码...developer.yahoo.com/performance/rules.html 是雅虎对这种做法的解释。
这些雅虎性能规则仍然是最新的吗？我不得不想象有人发布了一套类似的完整规则（或者雅虎可能发布了更新），其中考虑了过去四年发生的变化。
@kralco 我发现this article 很有趣。考虑到当今网络的性质。
实际上我的 jQuery 提交方法直到我将 javascript 代码移到底部才起作用。这是为什么呢？

标签： javascript webpage

【解决方案1】：

它将允许网页在执行 JavaScript 之前可见地加载，这对于 Google Analytics 之类的东西很有意义，这不需要在页面加载之前发生。

您可能还想查看 jQuery、原型等内容，并附加到“就绪”处理程序，该处理程序在 DOM 完全加载后执行 JavaScript 代码，这是许多 JavaScript 代码的合适位置。

【讨论】：

这是否意味着通常在标记中的 JavaScript 可以在页面中标记之后的任何位置？
是的，
你甚至不必把脚本放在html标签里面，你可以把它放在底部外面，它仍然可以工作......虽然它可能看起来有点滑稽。
在主要使用 jQuery 进行事件驱动之前，我在周围散布了脚本标签，就像 vava 和 NickLarsen 提到的那样。它们几乎可以在 HTML 中的任何位置，甚至在 HTML 标记之后。
@NickLarsen，这不成立。不好的做法。

【解决方案2】：

假设您没有在 CDN 上运行或没有从单独的子域或服务器提供 JS，它将同步加载并强制您的 HTML 内容等待它下载文件。通过将 JS 放在页面底部关闭 </body> 标记之前，您允许在加载 javascript 之前解析 HTML。 这会产生更快的页面加载时间。

【讨论】：

【解决方案3】：

如果您有静态 html 内容和大量 javascript，它可能会在感知页面加载时间方面有所不同，因为 html 将首先加载给用户可以查看的内容。如果你没有太多的 javascript，或者现有的页面内容依赖于 javascript 才能发挥作用，那么这实际上并没有那么有用。

【讨论】：

【解决方案4】：

是的，页面会在加载和执行 javascript 之前加载内容并呈现，因此页面加载速度会更快。

【讨论】：

【解决方案5】：

我想为这个主题带来更新，谷歌最近推出了异步剪辑http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1，可以添加到您的网站以带来例如谷歌统计支持。它应该放在<head> 部分的底部以获得最佳性能。关键是这增加了在用户离开页面之前发送跟踪信标的可能性。

如果您想使用您的谷歌分析在谷歌网站管理员工具中验证您的网站，它也应该位于那里。

除此之外，基本上仍然适用相同的规则 - 底部的 javascript 用于“快速”加载页面。我使用引号是因为在 javascript 完成之前我不会计算页面已完全加载；-)

【讨论】：

【解决方案6】：