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

Question

我们正在开发大型的ASP.NET应用程序，其中包含许多包含ASCX控件的动态创建页面。 我们在各个地方都使用了大量的jQuery。

我一直在阅读关于将内联JavaScript代码移动到页面底部的建议，因为如果它被“过早”包含，它可能会延迟页面的加载。

现在我的问题是：在使用jQuery时这仍然有意义吗？ 大多数代码都在就绪处理程序中执行，因此我认为它不会减慢页面的加载速度。 在我的情况下，多个用户控件ASCX都有自己的jQuery 部分，将所有这些部分移动到呈现的页面中并不容易。

- PeterTheNiceGuy

---

你的 ready 调用为什么不在一个外部文件中呢？这样比内联调用更易于管理。 - steve_c

你还希望在答案中看到什么吗？像这样悬而未决似乎有些遗憾... :-) - Már Örlygsson

我在找到这个线程时想知道如何让ASP.NET ScriptManager将js引用放在页面底部。如果您的代码使用此功能，那么这似乎是您想要的东西。 - Dan Doyon

在发表了我的最后一条评论之后，我发现了这个网址http://omaralzabir.com/fast_page_loading_by_moving_asp_net_ajax_scripts_after_visible_content/，他使用过滤器的解决方案来从响应中提取脚本标签并将其附加到末尾。需要看看它是否是一个实用的解决方案。ViewState负载页面可能会变得更慢。 - Dan Doyon

Answer 1

推荐将脚本放在HTML末尾，因为加载和执行脚本是顺序进行的（一次只能执行一个脚本），同时会完全阻塞图片和CSS文件的加载和解析。

页面顶部的大型/滞后/运行缓慢的脚本会导致页面内容/布局加载和呈现的不必要延迟。

脚本的大小（下载时间）和复杂性（执行时间（DOM遍历等））是有影响的，但更重要的是单个

- Már Örlygsson

---

请记住，平行处理通常是有益的。脚本不一定位于与 HTML、CSS 和图像相同的服务器上。此外，如果浏览器感觉管道堵塞，它可以选择不请求脚本。浏览器越早获取脚本信息，就越能快速排队/线程化处理。 - strager

脚本会阻止其他对象的加载 - 不管它们位于哪个服务器上。阅读性能文献。顺便说一句，我反对投票否决。 - Már Örlygsson

@strager：“如果浏览器感觉管道堵塞，它可以简单地不请求脚本。” 能详细解释一下吗？我从未在任何浏览器中看到过这个功能。（由浏览器解析页面并列出要下载的其他资源（图像、样式、脚本）。决定“哦，我只是不想下载那个”不是浏览器的职责。） - Piskvor left the building

@Piskvor，我的意思是（那是'08年...），由于请求过多，浏览器可以将请求保留到稍后（排队）。 - strager

@strager：确实，大多数浏览器都有同时下载限制；但是脚本执行（在许多浏览器中，还有页面渲染）也会被推迟（正如@Már Örlygsson的回答和链接的论文所说）。 - Piskvor left the building

Answer 2

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

请参阅示例和此博客文章，了解页面元素排序方式会如何影响速度的示例。

- Sam Hasler

Answer 3

当您包含JS时，从那一点开始页面的加载将被延迟，因此JS文件可能包含“document.write”语句。

这意味着整个页面将停止从您包含JS文件的那一点开始呈现，并使浏览器变成“白色”或其他某些颜色（至少不显示页面的其余部分），因此简短的答案是肯定的...！

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

就像将JS的包含（以及内联JS-顺便说一下，您不应该使用它）移到底部一样...

话虽如此，如果您正在使用ASP.NET，则不应使用jQuery，而应使用Ra-Ajax，这顺便包括了所有这些“最佳实践”...

- Thomas Hansen

---

我知道这篇文章现在已经有些过时了，也许当时是有道理的，但基于Visual Studio 2010中的模板网站项目包含jQuery，没有任何理由阻止在.NET中使用jQuery。 - vpiTriumph

Answer 4

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

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

- ScottKoon

---

这不是真的。将它放在底部的原因是让页面内容首先加载，而不是让用户在下载200kb脚本时看着空白屏幕。 - nickf

Scott，那是最明显（因此也是最常见）的原因-没错。然而，正如帖子所指出的，document.ready处理程序的可用性使其成为一个非问题。剩下的是页面加载性能问题。Nickf是完全正确的。 - Már Örlygsson

在页面加载完成之前，您无法操纵DOM（安全），因为这会在某些浏览器中触发异常...所以这是完全错误的说法...（抱歉，-1，我的第一个...） - Thomas Hansen

嗯，那么可以提出一个关于压缩脚本并链接到它们而不是将它们内联的论点。 - ScottKoon