放置 Jquery 代码（或单独的 Jquery 文件）的最佳位置在哪里？如果我把它放在页脚，页面加载会更快吗？
问问题
166858 次
9 回答
230
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入部分页面内容，则不能将其移至页面下方。也可能存在范围问题。在许多情况下，有一些方法可以解决这些情况。
经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会被延迟，但不会像期望的那样延迟。如果可以推迟脚本，也可以将其移至页面底部。这将使您的网页加载速度更快。
编辑： Firefox 从 3.6 版开始支持 DEFER 属性。
资料来源：
于 2010-01-20T22:04:08.137 回答
192
所有脚本都应该最后加载
在几乎所有情况下，最好将所有脚本引用放在页面末尾，就在</body>.
如果由于模板问题等原因您无法这样做，请使用defer属性装饰您的脚本标签，以便浏览器知道在下载 HTML 后下载您的脚本：
<script src="my.js" type="text/javascript" defer="defer"></script>
边缘案例
但是，在某些极端情况下，您可能会在页面加载期间遇到页面闪烁或其他伪影，这通常可以通过简单地将 jQuery 脚本引用放置在不带属性的<head>标记中来解决。这些案例包括 jQuery UI 和其他插件，例如 jCarousel 或 Treeview，它们修改 DOM 作为其功能的一部分。defer
进一步的警告
有些库必须在 DOM 或 CSS 之前加载，例如 polyfills。Modernizr 就是这样一个必须放在 head 标签中的库。
于 2010-01-20T22:11:19.413 回答
38
只在头部加载 jQuery 本身，当然是通过 CDN。
为什么？在某些情况下，您可能会包含带有嵌入 jQuery 相关代码的部分模板（例如 ajax 登录表单片段）；如果 jQuery 在页面底部加载，你会得到一个“$ is not defined”错误，很好。
当然有一些方法可以解决这个问题（例如不嵌入任何 JS 并附加到 load-at-bottom js 包），但是为什么失去延迟加载 js 的自由，能够将 jQuery 相关代码放置在任何你喜欢的地方呢？Javascript 引擎并不关心代码在 DOM 中的位置，只要满足依赖项（如加载 jQuery）即可。
对于您的公共/共享 js 文件，是的，将它们放在之前</body>，但对于例外情况，在 html 中的该点处粘贴一个 jQuery 相关片段或文件引用确实是有意义的应用程序维护，请这样做。
在头部加载 jquery 没有性能损失；地球上哪个浏览器还没有缓存 jQuery CDN 文件？
无事生非，把 jQuery 放在头脑中，让你的 js 自由统治。
于 2012-06-13T09:35:30.030 回答
13
Nimbuz对所涉及的问题提供了很好的解释，但我认为最终答案取决于您的页面：对于用户来说更重要的是什么更重要 - 脚本或图像？
有些页面没有图像就没有意义，但只有次要的、非必要的脚本。在这种情况下，将脚本放在底部是有意义的，这样用户可以更快地看到图像并开始理解页面。其他页面依赖脚本来工作。在这种情况下，最好有一个没有图像的工作页面而不是一个有图像的非工作页面，因此将脚本放在顶部是有意义的。
要考虑的另一件事是脚本通常比图像小。当然，这是一个概括，你必须看看它是否适用于你的页面。如果确实如此，那么对我来说，这是将它们放在首位作为经验法则的论据（即，除非有充分的理由不这样做），因为它们不会像图像会延迟脚本那样延迟图像。最后，将脚本放在顶部会容易得多，因为当您需要使用它们时，您不必担心它们是否已加载。
总之，我倾向于默认将脚本放在顶部，并且只考虑是否值得在页面完成后将它们移到底部。这是一种优化——我不想过早地这样做。
于 2010-01-21T03:10:20.547 回答
6
大多数 jquery 代码在文档就绪时执行，无论如何直到页面末尾才会发生。此外，页面呈现可能会因 javascript 解析/执行而延迟，因此最好将所有 javascript 放在页面底部。
于 2010-01-20T22:01:53.713 回答
5
标准做法是将所有脚本放在页面底部，但我使用带有许多 jQuery 插件的 ASP.NET MVC，我发现如果我将 jQuery 脚本放在<head>master 部分会更好页。
就我而言，如果脚本位于页面底部，则在加载页面时会出现工件。我正在使用 jQuery TreeView 插件，如果一开始没有加载脚本，则树将在没有插件强加的必要 CSS 类的情况下呈现。所以当页面第一次加载时，你会得到这个看起来很有趣的混乱，然后是 TreeView 的正确呈现。非常难看。将 jQuery 插件放在<head>母版页的部分可以消除这个问题。
于 2010-01-20T22:04:50.913 回答
4
尽管几乎所有网站仍然将 Jquery 和其他 javascript 放在 header :D 上，甚至检查 stackoverflow.com 。
我还建议你在正文的结束标签之前加上。您可以在放置在任一位置后检查加载时间。脚本标签将暂停您的网页以进一步加载。
在页脚放置 javascript 后，在加载 javascript 之前，您的网页可能会出现不寻常的外观，因此请将 css 放在页眉部分。
于 2011-07-12T06:43:25.507 回答
1
</body>根据Yahoo Developer Network的Best Practices for Speeding Your Web Site 这个链接，就在之前是最好的地方，这是有道理的。
最好的办法是自己测试。
于 2010-01-20T22:02:25.210 回答
1
对我来说，jQuery 有点特别。也许是常态的例外。有很多其他脚本依赖于它，因此尽早加载非常重要，以便稍后出现的其他脚本按预期工作。正如其他人指出的那样，即使这个页面在 head 部分加载 jQuery。
于 2017-10-20T13:57:10.527 回答