jQuery：将 JavaScript 移动到页面底部？答案

【问题标题】：jQuery: Move JavaScript to the bottom of the page?jQuery：将 JavaScript 移动到页面底部？
【发布时间】：2010-09-23 19:57:21
【问题描述】：

我们正在开发具有大量包含 ASCX 控件的动态创建页面的大型 ASP.NET 应用程序。我们到处使用大量的 jQuery。

我一直在读到，将内联 JavaScript 代码移动到页面底部是有意义的，因为当它“过早”包含时，它可能会延迟页面的加载。

我现在的问题是：在使用 jQuery 时这仍然有意义吗？

大部分代码在就绪处理程序中执行，所以我希望这不会减慢页面的加载速度。在我的例子中，多个用户控件 ASCX 都有自己的 jQuery 点点滴滴，在呈现的页面中将它们全部向下移动并不容易。

【问题讨论】：

您的就绪调用不在外部文件中的任何原因？这比内联这些调用更易于管理。
您还希望在答案中看到什么吗？像这样挂着一个线程似乎很丢脸...... :-)
当我发现这个线程时，我一直在寻找的是如何让 ASP.NET ScriptManager 将 js 引用放在页面底部。如果您有使用它的代码，这似乎是您想要的东西。
发表我的最后一条评论后，我发现了这个omaralzabir.com/…，他有一个解决方案，使用过滤器将脚本标签从响应中拉出，然后附加到最后。需要看看它是否是一个实用的解决方案。加载 ViewState 的页面可能最终会变慢。

【解决方案1】：

当您包含 JS 时，从该点加载页面将延迟，因为 JS 文件可能包含“document.write”语句。

这意味着整个页面将从包含 JS 文件的位置停止呈现，并使浏览器变为“白色”或其他内容（至少不显示页面的其余部分），所以简短的回答是 绝对是的...！

（更长的答案是“可能”，概率为 99%）

就像将 JS（以及内联 JS - 你不应该使用 BTW）移到底部...

也就是说，如果您使用的是 ASP.NET，则不应使用 jQuery，而应使用 Ra-Ajax，顺便说一句，它会自动为您包含所有这些“最佳实践”...

【讨论】：

我知道这是一篇旧帖子，当时可能还有效，但基于 Visual Studio 2010 中的模板网站项目包含 jQuery 的事实，没有任何理由不鼓励将 jQuery 与 .NET 结合使用。

【解决方案2】：

建议将脚本放在 HTML 的后面，因为加载和执行脚本是按顺序进行的（一次一个脚本），同时会完全阻止图像和 CSS 文件的加载和解析。

页面顶部附近的大型/滞后/运行缓慢的脚本可能会对页面内容/布局的加载和呈现造成不必要的延迟。

脚本的大小（下载时间）和复杂性（执行时间（dom 遍历等））是重要因素 - 但更重要的是，单个 <script> HTTP 请求的数量更为重要（请求越少越好）。

使用“document.ready”处理程序减少了由于执行缓慢而导致的延迟 - 但仍然存在顺序 HTTP 开销的问题。

推荐阅读：High Performance Web Sites Nate Koeckley。

【讨论】：

回想一下，并行性通常很好。脚本不一定与 HTML、CSS 和图像位于同一台服务器上。此外，如果浏览器感觉管道被堵塞，它可以根本不请求脚本。浏览器越早获得脚本信息，它就可以越快地对其进行排队/线程化。
脚本会阻止加载其他对象——无论它们位于哪个服务器上。阅读性能文献。我反对投票，顺便说一句。
@strager：“如果浏览器感觉管道被堵塞，它可以根本不请求脚本。”需要详细说明吗？我从未在任何浏览器中看到过该功能。（由浏览器解析页面并列出要下载的其他资源（图像、样式、脚本）。不由浏览器决定“哦，我只是不” t 感觉喜欢下载那个“。）
@Piskvor，我想我的意思是（08 年...）由于请求过多，浏览器可以将请求保留到稍后（排队）。
@strager：确实，大多数浏览器都有同时下载限制；但随后脚本执行（以及在许多浏览器中，页面渲染）也被推迟（正如@Már Örlygsson 的回答和链接的论文所说）。

【解决方案3】：

大多数时候，将 JavaScript 移动到页面底部的原因是为了确保 JavaScript 可能引用的任何 DOM 元素在 JavaScript 运行之前已经创建。这也确保了页面在运行任何 JavaScript 之前有时间呈现。

在这种情况下，我不必担心将 JavaScript 移到页面下方。

【讨论】：

这不是真的。将其放在底部的原因是为了可以首先加载页面内容，并且您不会在下载 200kb 脚本时让用户看着空白屏幕。
Scott，这是最明显（因此也是最常见）的原因 - 是的。然而，正如发帖者所指出的，document.ready 处理程序的可用性使得这不是问题。剩下的是页面加载性能问题。 Nickf 完全正确。
在页面 OnLoad 被触发之前，您无论如何都不能操作 DOM（安全），因为它会在某些浏览器中触发异常......所以这是一个完全错误的陈述......（对不起，-1，我的第一个...）
嗯，那么有一个关于压缩脚本并链接到它们而不是将它们内联的论点。

【解决方案4】：

您可以对在Cuzillion 中排序 JavaScript 的不同方式进行建模，以了解它如何影响页面加载。

请参阅examples 和this blog post，了解页面元素排序如何影响速度的示例。

【讨论】：