在哪里放置Jquery代码（或单独的Jquery文件）最好？如果将其放在页脚中，页面是否会加载更快？
答：为了获得最佳性能，建议将Jquery代码放在head中。将其放置在页脚可能会导致页面加载延迟，影响用户体验。9个回答
231
脚本导致的问题是它们会阻塞并行下载。HTTP/1.1规范建议浏览器每个主机名最多下载两个组件。如果您从多个主机名提供图像，则可以使超过两个下载同时进行。然而，在下载脚本的过程中，浏览器不会开始任何其他下载，即使在不同的主机名上也是如此。在某些情况下，将脚本移动到底部并不容易。例如，如果脚本使用document.write向页面内容中插入一部分，则无法将其移到页面较低的位置。还可能存在作用域问题。在许多情况下，有方法可以解决这些问题。
经常出现的另一个建议是使用延迟脚本。DEFER属性指示脚本不包含document.write，并提示浏览器可以继续呈现。不幸的是，Firefox不支持DEFER属性。在Internet Explorer中，脚本可以被延迟，但未达到预期的效果。如果可以延迟脚本，则也可以将其移至页面底部。这将使网页加载速度更快。
编辑：自Firefox 3.6版起，Firefox支持DEFER属性。
来源：
- eozzy
4
5我看过一些现代建议，它们指出脚本应该放在页面顶部。将脚本放在底部可以同时加载页面正文中的图像和其他内容，但会导致页面中的脚本被延迟加载 - 浏览器需要先下载整个HTML页面主体，才能知道要加载的脚本URL。大多数人参考的是不再准确的雅虎指南 - Firefox确实支持脚本的defer属性。如果你进行测量，将脚本置于顶部稍后加载将使页面加载速度更快。 - ShadowChaser
我能用这种方法查看页面加载速度的一些统计数据吗？ - Gabriel Alack
1自Firefox 3.6版本以来，它支持DEFER属性。 - Nikita 웃
2更新：截至2016年初/中期，所有现代浏览器都将每个主机名的连接数增加到至少6个。 - Night Owl
197
所有脚本都应该在最后加载
在几乎所有情况下，最好将所有脚本引用放置在页面末尾，就在</body>之前。
如果由于模板问题等原因无法这样做，可以使用defer属性来修饰脚本标签，使浏览器知道要在 HTML 下载完成后下载您的脚本：
<script src="my.js" type="text/javascript" defer="defer"></script>
边缘情况
然而，在某些边缘情况下，您可能会在页面加载期间遇到页面闪烁或其他伪像，这通常可以通过将jQuery脚本引用放置在<head>标签中没有defer属性来解决。这些情况包括jQuery UI和其他附加组件，如jCarousel或Treeview，它们作为其功能的一部分修改DOM。
进一步的注意事项
有一些库必须在DOM或CSS之前加载，例如polyfills。Modernizr就是这样的一个库，必须放置在head标签中。
- Chad Levy
20
5考虑一下这个网址：http://themeforest.net/item/portfolious-professional-business-template/full_screen_preview/47805。这是我最近购买的网站主题，它在首页上使用了 jQuery 和 jCarousel。当我将脚本块从 head 标签移到文件末尾时，我注意到轮播中使用的图片会在页面加载时一次性全部显示出来，然而当脚本文件在 head 标签中时，页面会加载得更顺畅。 - Chad Levy
5使用CSS设置内容的初始状态，CSS应该放在头部。为了使其他东西正常工作而破坏某些东西并不是解决方案。如果访问者必须等待jQuery和所有相关插件加载完毕才能渲染任何内容，则她可能没有足够的耐心等待以查看内容。 - Duncan
9ChadLevy说得对：在某些情况下，如果将jQuery插件引用放在
<head>中，它们会起到更好的作用。如果您的标记依赖于jQuery插件为您整理内容，那么将插件引用放在页面底部就没有意义了，因为在插件加载之前，您的网页中将出现奇怪的标记。规则存在是为了被遵循，直到它们不再适用，这时候就应该打破规则。 - Robert Harvey2@Duncan：理想情况下，您可以控制所有依赖项。关于jQuery（更具体地说是像jQuery UI和其他插件之类的东西），它的设计使您无法完全控制其功能，因此如果使用该元素的插件不考虑所述属性，则可能无法向DOM元素添加可见性属性以使其更优雅地加载。有时候，违反简单约定比尝试让依赖项按照您的意愿工作更好。 - Chad Levy
2@Stefan：如果你的jQuery插件不允许操作DOM，那还有什么意义呢？ - Robert Harvey
显示剩余15条评论
38
仅在头部加载jQuery，当然要通过CDN。
为什么？在某些情况下，您可能会包含一个带有嵌入式jQuery依赖代码的部分模板（例如ajax登录表单片段）; 如果在页面底部加载jQuery，则会出现“未定义 $”错误，很不好。
当然有一些解决方法（例如不嵌入任何JS并将其附加到在底部加载的js捆绑包中），但是为什么失去延迟加载js的自由以及能够随意放置依赖于jQuery的代码呢？只要满足依赖项（如已加载的jQuery），Javascript引擎就不会在DOM中的代码位置上产生影响。
对于您的常见/共享JS文件，请将它们放在</body>之前，但对于例外情况，在html的特定点处粘贴一个依赖于jQuery的片段或文件引用真的是明智的选择，那就这样做吧。
在头部加载jquery不会影响性能;全球哪个浏览器没有jQuery CDN文件缓存在本地?
关于这个问题多说无益，把jQuery放在头部，让您的js自由发挥吧。
- virtualeyes
2
1很多浏览器都不会缓存资源，考虑到版本和缓存是基于确切的资源名称，因此最高的数字我读过的是约2％，所以jquery1.4.2与jquery1.7、1.9.1或...不同。 - Toni Leigh
在这
2%中，假设有一半的访问者会在页面首次加载前离开。这样你就失去了1%的访问量，但可能会节省大量的开发时间和麻烦。看看这是否符合你的商业模式... - Sergey Orshanskiy13
Nimbuzz提供了一个非常好的解释，但我认为最终答案取决于您的页面：对于用户来说，更重要的是脚本还是图像？有一些页面没有图像就没有意义，但只有次要的、非必要的脚本。在这种情况下，将脚本放在底部是有意义的，这样用户可以更早地看到图像并开始理解页面。其他页面依赖于脚本来工作。在这种情况下，拥有一个可以正常工作但没有图像的页面比一个无法工作但有图像的页面更好，所以将脚本放在顶部是有意义的。
另一个需要考虑的问题是，脚本通常比图像小。当然，这是一种概括，您必须查看它是否适用于您的页面。如果确实如此，则通常建议首先将它们放在前面（即除非有很好的理由做出其他选择），因为它们不会延迟图像的加载，而图像会延迟脚本的加载。最后，将脚本放在顶部要容易得多，因为在需要使用它们时，您无需担心它们是否已加载。
总之，我倾向于默认将脚本放在顶部，只有在页面完成后才考虑将它们移到底部是否值得。这是一种优化方式-我不想过早地进行优化。
另一个需要考虑的问题是，脚本通常比图像小。当然，这是一种概括，您必须查看它是否适用于您的页面。如果确实如此，则通常建议首先将它们放在前面（即除非有很好的理由做出其他选择），因为它们不会延迟图像的加载，而图像会延迟脚本的加载。最后，将脚本放在顶部要容易得多，因为在需要使用它们时，您无需担心它们是否已加载。
总之，我倾向于默认将脚本放在顶部，只有在页面完成后才考虑将它们移到底部是否值得。这是一种优化方式-我不想过早地进行优化。
- EMP
5
直到你提出过早优化的论点，我还对你印象不错。这只是另一个人们在完全不了解其含义的情况下教条式遵循的规则。 - Robert Harvey
6好的，没关系，不能赢得所有比赛！我相信我理解它的含义。 :) - EMP
我不确定你是否需要担心脚本是否已加载。渲染块直到脚本加载完成，这是这次讨论的主要内容。只要在加载之前不调用任何东西，就没问题了。此外，这就是回调函数存在的原因，而且你不应该在页面中嵌入太多其他内容。据我所知，图像不会阻塞（它们会并行加载），实际上，DOM 可能已经准备好并且正在运行您的脚本，在图像完全加载之前。把脚本放在前面以避免它们被阻塞是没有意义的。 - Duncan
4鉴于普遍共识是将脚本放在底部，那么默认情况下这样做不是更好吗？只有遇到问题时再把它们移到顶部。反其道而行之似乎很奇怪。如果没有花费上的区别，有时候做最优选择是更好的 :) - Duncan
@Duncan，是的，那是我的做法。我把插件放在底部，当出现问题时，我把它们移到顶部，然后问题就解决了。 - Robert Harvey
6
大多数jQuery代码都在文档就绪后执行，而这个时间点一般要等到页面加载结束才会发生。此外，JavaScript的解析/执行可能会延迟页面渲染，因此最好将所有JavaScript放在页面底部。
- Stefan Kendall
5
标准做法是将所有脚本放在页面底部，但我使用ASP.NET MVC和一些jQuery插件，如果我将jQuery脚本放在主页的部分，它们会更好地工作。在我的情况下，如果脚本位于页面底部，则在页面加载时会出现问题。我正在使用jQuery TreeView插件，如果脚本未在开始时加载，则树将呈现为没有插件所需的CSS类所强加的状态。因此，在页面首次加载时，您将看到这个有趣的混乱，然后才是TreeView的正确渲染。看起来非常糟糕。将jQuery插件放在主页的部分可以消除这个问题。
- Robert Harvey
7
2@Dan Beam：TreeView是从数据库表中填充的，而TreeView插件根据表格内容设置TreeView的样式，因此不行。 - Robert Harvey
是的，它会的，相信我。不过，您需要修改您的标记和可能的Treeview插件。 - Dan Beam
2我为什么要那样做，当我可以将未修改的TreeView插件脚本放在页面顶部，它仍然能够正常工作呢？那没有任何道理，丹。 - Robert Harvey
我发现使用Kendo时，必须将脚本放在页面顶部。如果没有放置在顶部，控件就无法正常工作。 - Robert Achmann
1你好 Robert，我也在使用带有部分表单的ASP.NETMVC。将JavaScript放在部分视图中是有意义的，因为每次执行部分视图时，新字段都会重新分配其功能（例如验证）。但是，当我尝试使用
@Html.Action时，我遇到了问题，因为我的部分视图会出现“$未定义”的错误，这意味着我必须使用.load('@Url.Action')来加载部分视图。但是，由于额外的请求，这会导致FOUC问题。根据您的建议，我将把jquery移到主页的RenderBody()之前。 - Malkin显示剩余2条评论
4
尽管几乎所有的网站仍然将Jquery和其他JavaScript放在头部，甚至包括stackoverflow.com。
我建议您将其放在body结束标签前。您可以在这两个位置之间放置on并检查加载时间。脚本标记将暂停您的网页以进一步加载。
将JavaScript放在页脚后，直到加载JavaScript之前，您的网页可能会出现异常外观，因此请将CSS放在头部部分。
我建议您将其放在body结束标签前。您可以在这两个位置之间放置on并检查加载时间。脚本标记将暂停您的网页以进一步加载。
将JavaScript放在页脚后，直到加载JavaScript之前，您的网页可能会出现异常外观，因此请将CSS放在头部部分。
- Mujah Maskey
1
2但是，您可以在脚本上使用defer来实现相同的效果。http://www.w3schools.com/tags/att_script_defer.asp - Jack
1
对我来说，jQuery有点特殊。也许是规则的例外。有很多其他的脚本依赖它，所以它很重要，需要尽早加载，这样后面的其他脚本才能正常工作。正如其他人指出的那样，即使这个页面也在head部分加载了jQuery。
- RollingInTheDeep
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 5 jQuery模板 - 我应该把它们放在哪里？
- 7 我应该把JavaScript代码放在哪里？
- 3 在CodeIgniter应用程序中，你应该把jQuery的JavaScript代码放在哪里？
- 11 函数应该放在jQuery的extend内部还是外部？
- 12 事件监听器应该放在document.ready函数内吗？还是无所谓？
- 4 我的JS代码应该放在哪里？如何加载多个jQuery插件？
- 3 jQuery事件...应该把多少代码放在里面？
- 3 我应该使用jQuery、jQuery Mobile还是iPad网页？
- 9 CodeIgniter中的jQuery，应该放在视图内还是外部JS文件中？
- 4 新项目中应该选择YUI还是jQuery？