关于“将脚本放在底部”建议的问题答案

【问题标题】：Question about "Put SCRIPTs at the bottom" advice关于“将脚本放在底部”建议的问题
【发布时间】：2011-04-13 05:16:06
【问题描述】：

我已阅读关于将 SCRIPT 置于底部的建议（例如 Is "Put Scripts at the Bottom" Correct?）并且我理解这个概念。

但是，我有一个疑问。

如果我有一个 OnClick，即使它调用了一个 JS 函数，如果 javascript 包含文件未加载，该函数也会失败。我可以解决这个问题，但它非常复杂。

我的想法是，在第一页加载后，脚本将被缓存在客户端的浏览器中，因此在第一页之后，它不会对我放置 SCRIPT 包含指令的性能产生任何影响，但它可能会对我的 OnClick 事件产生影响。

我可以看到在第一页加载一些巨大的 Javascript 库会很慢，可能会导致一些/许多用户“点击关闭”。但是从第二页开始，将脚本放在页面末尾有什么好处吗？

如果我真的很厚并且忽略了一些重要的事情，我会很感激任何澄清；谢谢。

【问题讨论】：

我已接受所有问题的答案，其中我收到了我的问题的答案。在我的大多数问题上，我都收到了很多有用的建议，但不是我问题的实际答案。如果我没有可接受的答案，我会尽我所能提供一个说明原因的回复，并对所有有用的回复投赞成票。

【解决方案1】：

将脚本放在哪里并不重要，特别是如果您使用的是带有适当 onPageLoad 事件的 JS 框架（如 jQuery 的 ready() ）

但是，对于外部加载的脚本，例如分析代码、广告等。将它们放在页面底部非常重要。这是因为即使用户启用了缓存，缓存也会被刷新，一些脚本使用 iframe 加载其内容而不使用缓存（即广告）。如果这些没有放在页面底部，那么浏览器会在加载它们时挂起，并且通常情况下，它们所在的服务器响应速度可能非常慢。

【讨论】：

谢谢。您对 3rd 方库提出了很好的观点，尽管我的观点旨在与支持我们“在页面中”执行的代码的库有关，而且碰巧的是，我们没有任何 3rd 方库。我们确实有谷歌分析，现在我想我们确实有它在底部:)

【解决方案2】：

您应该将自己的脚本放在头部，将外部脚本放在页面末尾。

如果您的服务器工作正常，内部脚本将快速加载，因此它们的加载时间几乎不会被注意到。如果您的服务器很慢，那么页面将与要加载的脚本一样慢，因此加载它们的位置并没有太大区别。

您从不同服务器加载的脚本有时加载速度很慢，这就是您希望它们位于页面末尾的原因，这样您的页面就不会那么依赖它们了。

不久前，我们将一些外部脚本移到页面下方，以便它们在表单的结束标记之后加载，这样即使外部脚本尚未加载，用户也可以发布表单。

【讨论】：

关于外部/场外脚本托管在服务器上的好点，结果证明服务器已关闭，并导致整个页面呈现被“破坏”。我们托管，例如，JQuery 在我们自己的服务器上包含脚本（而不是使用谷歌的代码服务器），以便我们严格控制结果。

【解决方案3】：

例如，在 jQuery 中，您可以添加一个ready() 事件，该事件将在页面准备就绪时触发。这样您就可以调用在文件末尾加载的函数。这种方式不是很复杂，也不是很困难。

我认为将脚本标签放在页面末尾是有好处的，尤其是当您尝试加载的文件很慢并因此阻塞页面时。

【讨论】：

我可能又变胖了，但即使我使用 READY() 对 OnClick 事件有何帮助？如果用户在我的延迟加载库完成加载之前点击它，或者如果他们在 READY() 甚至触发之前点击它（并且一些不显眼的 JS 修改了该元素的 OnClick 事件），用户将不会得到我的完全预期的 OnClick 操作 - 他们会吗？在这种情况下，渲染内容以便用户“更快”看到它是没有好处的，如果他们不能然后点击任何东西直到 JS 完成加载 - 但也许我错过了什么？？

【解决方案4】：

把你的 JS 放在哪里也取决于你是否支持非 JS 用户。

如果你是按照渐进增强的思想来构建的，那么页面按钮应该可以在没有 JS 的情况下以令人满意的方式运行。 JS 只会覆盖非 JS 功能。我认为这通常是在将所有 JS 放在页面底部的想法中的实际要求。

如果页面在没有 JS 的情况下无法运行（或者 JS 功能的好处很重要），我会将必要的 JS 添加到标题中。

【讨论】：