jQuery代码应该放在页眉还是页脚中?


Answers:


188

所有脚本应最后加载

在几乎每种情况下,最好将所有脚本引用放在页面末尾的</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标签中的库


5
好吧,考虑一下:themeforest.net/item/portfolious-professional-business-template/…。这是我最近购买的一个网站主题,其主页上使用jQuery和jCarousel。当我将脚本块从文件头移到文件末尾时,我注意到轮播中使用的图像会在页面加载期间立即全部显示,而当脚本文件在文件头中时,页面加载会更加顺畅。
乍得利维2010年

5
使用CSS设置内容的初始状态。CSS应该放在首位。破坏某些东西以使其他东西起作用不是解决方案。如果访问者在呈现任何内容之前必须等待jQuery和所有相关插件加载,则她可能不会留足够长的时间才能看到内容。
邓肯2010年

9
ChadLevy是正确的:在某些情况下,如果在中引用了jQuery插件,则它们会更好地工作<head>。如果您的标记依赖于jQuery插件为您整理内容,那么将插件引用放在页面底部是没有意义的,因为您将在插件中加载时髦的标记,直到插件加载。应该遵守规则,直到它们不再起作用为止,此时应打破规则。
罗伯特·哈维

2
@Duncan:理想情况下,可以控制所有依赖项。关于jQuery的事情(更具体地说是jQuery UI和其他插件之类的东西)是设计使然的,您无法完全控制它们的功能,因此,如果无法在DOM元素中添加可见性属性之类的东西,以便更优雅地加载,使用该元素的插件不会考虑所述属性。有时,违抗一个简单的约定比尝试获得依赖来按所需的方式工作要好。
乍得利维2010年

2
@Stefan:如果不允许您的jQuery插件操作DOM,那有什么意义呢?
罗伯特·哈维

229

将脚本放在最下面

脚本引起的问题是它们阻止并行下载。HTTP / 1.1规范建议浏览器每个主机名并行下载最多两个组件。如果从多个主机名提供映像,则可以并行进行两次以上的下载。但是,在下载脚本时,即使使用不同的主机名,浏览器也不会启动任何其他下载。在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则无法将其在页面中移至较低位置。可能还会存在范围界定问题。在许多情况下,有一些方法可以解决这些情况。

经常出现的另一种建议是使用延迟脚本。DEFER属性指示脚本不包含document.write,这是浏览器可以继续呈现的线索。不幸的是,Firefox不支持DEFER属性。在Internet Explorer中,该脚本可能会被延迟,但不会达到所需的程度。如果可以推迟脚本,则也可以将其移至页面底部。这将使您的网页加载更快。

编辑: Firefox从3.6版开始确实支持DEFER属性。

资料来源:


4
我已经看到一些现代建议,指出应该将脚本放在顶部。将脚本放在底部允许并行加载页面正文中的图像和其他内容,但实际上会导致稍后加载页面中的脚本-需要在浏览器知道之前就下载整个HTML正文。要加载的脚本网址。大多数人都引用了Yahoo指南,该指南不再准确-Firefox确实尊重脚本中的延迟属性。如果进行衡量,则顶部的Deferral将导致更快的页面加载。
ShadowChaser 2012年

我可以通过这种方法查看页面加载速度的一些统计信息吗?
加布里埃尔·阿勒克

1
从3.6版开始,Firefox确实支持DEFER属性。资料来源:w3schools.com/tags/att_script_defer.asp
Nikita 2015年

1
更新:由于早/中期到2016年,所有现代浏览器都按主机连接的数量增加到至少6
猫头鹰

32

当然,仅通过CDN即可将jQuery本身加载到头部。

为什么?在某些情况下,您可能会包含带有嵌入式jQuery相关代码的部分模板(例如,ajax登录表单摘要);如果将jQuery加载到页面底部,则会出现“未定义$”的错误,很好。

当然,有多种方法可以解决此问题(例如不嵌入任何JS并附加到底部加载js捆绑包),但是为什么要失去自由加载js的自由,即能够将jQuery依赖的代码放置在您喜欢的任何位置?只要满足依赖关系(例如加载jQuery),JavaScript引擎就不会在乎代码在DOM中的位置。

是的,对于常见/共享的js文件,可以将它们放在之前</body>,但是对于例外情况,在应用程序维护方面,将jQuery依赖的代码段或文件引用直接粘贴在html上确实有意义。

在头部加载jquery对性能没有影响;这个星球上的哪个浏览器在缓存中还没有jQuery CDN文件?

事不宜迟,将jQuery放在首位,让您的js自由统治。


1
许多很多浏览器都没有;当您考虑该版本并且事实缓存基于确切的资源名称时,我读到的最高数字大约是2%,因此jquery1.4.2与jquery1.7或1.9.1或。不相同。 。
托尼·雷

这些的2%,比方说,有一半会在页面加载的第一次之前离开。这样,您就失去1%了访问者,但有可能节省大量开发时间和麻烦。看看这对您的商业模式是否有意义...
osa

13

Nimbuz对涉及的问题提供了很好的解释,但是我认为最终答案取决于您的页面:对于用户来说,更快拥有更重要的内容是脚本还是图像?

有些页面没有图像就没有意义,而只有少量的,不必要的脚本。在这种情况下,将脚本放在底部是有意义的,因此用户可以更快地看到图像并开始理解页面。其他页面依靠脚本工作。在这种情况下,有一个没有图像的工作页面比有图像的非工作页面更好,因此将脚本放在顶部是有意义的。

要考虑的另一件事是脚本通常比图像小。当然,这是一个概括,您必须查看它是否适用于您的页面。如果这样做的话,对我来说,这是将其放在第一位的经验(即除非有充分的理由这样做),因为它们不会像延迟图像那样延迟图像。最后,在顶部放置脚本要容易得多,因为您不必担心在需要使用它们时是否会加载它们。

总而言之,我倾向于默认情况下将脚本放在顶部,并且只考虑在页面完成后是否值得将它们移到底部。这是一种优化-我不想过早地做到这一点。


直到您拖出过早​​的优化论点,您才有了我。这只是人们在没有完全理解其含义的情况下教条化遵循的另一条规则。
罗伯特·哈维2010年

6
哦,好吧,不能全部赢得他们!我相信我了解其含义。:)
EMP 2010年

我不确定您是否需要担心脚本是否已加载。渲染块直到脚本加载完成,这就是本讨论的重点。因此,只要您在加载之前不调用任何东西,就可以了。此外,这就是回调的用途,您不应该在页面中真正嵌入其他内容。据我了解,图像不会阻塞(它们并行加载),实际上DOM可以准备好并且脚本在图像完全加载之前就可以运行。仅将脚本放在第一位只是为了避免阻止它们是没有意义的。
邓肯2010年

4
鉴于普遍的共识是将脚本放在最底端,默认情况下这样做不是更好,并且仅在遇到问题时才将它们移到最顶端吗?向后做事似乎很奇怪。有时,如果花费的精力没有差异,那么最好做一些优化的事情:)
Duncan 2010年

@邓肯,是的,那是我的方法。我将插件放在底部,遇到问题时,将它们放在顶部,这样就解决了问题。
罗伯特·哈维

6

大多数jquery代码都在准备好文档的情况下执行,但是直到页面末尾才发生。此外,JavaScript解析/执行可能会延迟页面渲染,因此最好的做法是将所有JavaScript放在页面底部。


5

标准做法是将所有脚本放在页面底部,但是我将ASP.NET MVC与许多jQuery插件一起使用,并且我发现,如果将jQuery脚本放在<head>母版部分中,效果会更好页。

就我而言,如果脚本位于页面底部,则在页面加载时会出现工件。我正在使用jQuery TreeView插件,并且如果一开始没有加载脚本,则树将在没有插件强制的CSS类的情况下呈现。因此,在页面首次加载时,您会得到这种看起来很滑稽的混乱,然后是TreeView的正确呈现。很不好看。将jQuery插件放在<head>母版页的部分中可以消除此问题。


内部网不受互联网条件的影响,因此负载延迟可能不太明显。尽管如此,还是建议您遵循规则。
邓肯

不,将CSS标识符/样式放在标记中(而不是等待jQuery在DOM准备就绪时完成)即可解决此问题。
丹·比姆

1
@Dan Beam:Treeview是从数据库表填充的,Treeview的样式是由Treeview插件根据表的内容设置的,所以不行,这是行不通的。
罗伯特·哈维

1
当我可以将未修改的Treeview插件脚本放在页面顶部时,为什么要这样做呢?丹,那没有任何意义。
罗伯特·哈维

1
干杯罗伯特,我也使用ASP.NETMVC和局部表单。将javascript保留在partial中是有意义的,因为每次执行partial时都会重新分配新字段的功能(例如进行验证)。尝试使用时@Html.Action,我只会遇到这个问题,它会动态地将结果写入输出,因为我的partial给出了$ is undefined意思,我不得不使用.load('@ Url.Action')来加载partial。但这由于额外的要求而引起了关注。根据您的输入,我将把jquery移至我的母版页中的RenderBody()上方
Malkin 2015年

4

尽管几乎所有网站仍将Jquery和其他javascript放在标头:D上,甚至请检查stackoverflow.com。

我还建议您在机身末端标记前戴上。您可以在放置在两个地方后检查加载时间。脚本标记将暂停您的网页以进一步加载。

并且在将JavaScript放在页脚之后,您的网页可能会出现异常的外观,直到它加载javascript,因此将CSS放在页眉部分。


2
但是,您可以在脚本上使用defer来实现相同的目的。w3schools.com/tags/att_script_defer.asp
杰克·塔克


0

对我来说,jQuery有点特别。也许是规范的例外。依赖它的脚本还有很多,因此它很重要,因为它要尽早加载,以便随后出现的其他脚本可以按预期工作。就像其他人指出的那样,即使该页面的顶部也会加载jQuery。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.