Answers:
所有脚本应最后加载
在几乎每种情况下,最好将所有脚本引用放在页面末尾的</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标签中的库。
<head>
。如果您的标记依赖于jQuery插件为您整理内容,那么将插件引用放在页面底部是没有意义的,因为您将在插件中加载时髦的标记,直到插件加载。应该遵守规则,直到它们不再起作用为止,此时应打破规则。
脚本引起的问题是它们阻止并行下载。HTTP / 1.1规范建议浏览器每个主机名并行下载最多两个组件。如果从多个主机名提供映像,则可以并行进行两次以上的下载。但是,在下载脚本时,即使使用不同的主机名,浏览器也不会启动任何其他下载。在某些情况下,将脚本移到底部并不容易。例如,如果脚本使用document.write插入页面内容的一部分,则无法将其在页面中移至较低位置。可能还会存在范围界定问题。在许多情况下,有一些方法可以解决这些情况。
经常出现的另一种建议是使用延迟脚本。DEFER属性指示脚本不包含document.write,这是浏览器可以继续呈现的线索。不幸的是,Firefox不支持DEFER属性。在Internet Explorer中,该脚本可能会被延迟,但不会达到所需的程度。如果可以推迟脚本,则也可以将其移至页面底部。这将使您的网页加载更快。
编辑: Firefox从3.6版开始确实支持DEFER属性。
资料来源:
当然,仅通过CDN即可将jQuery本身加载到头部。
为什么?在某些情况下,您可能会包含带有嵌入式jQuery相关代码的部分模板(例如,ajax登录表单摘要);如果将jQuery加载到页面底部,则会出现“未定义$”的错误,很好。
当然,有多种方法可以解决此问题(例如不嵌入任何JS并附加到底部加载js捆绑包),但是为什么要失去自由加载js的自由,即能够将jQuery依赖的代码放置在您喜欢的任何位置?只要满足依赖关系(例如加载jQuery),JavaScript引擎就不会在乎代码在DOM中的位置。
是的,对于常见/共享的js文件,可以将它们放在之前</body>
,但是对于例外情况,在应用程序维护方面,将jQuery依赖的代码段或文件引用直接粘贴在html上确实有意义。
在头部加载jquery对性能没有影响;这个星球上的哪个浏览器在缓存中还没有jQuery CDN文件?
事不宜迟,将jQuery放在首位,让您的js自由统治。
2%
,比方说,有一半会在页面加载的第一次之前离开。这样,您就失去1%
了访问者,但有可能节省大量开发时间和麻烦。看看这对您的商业模式是否有意义...
Nimbuz对涉及的问题提供了很好的解释,但是我认为最终答案取决于您的页面:对于用户来说,更快拥有更重要的内容是脚本还是图像?
有些页面没有图像就没有意义,而只有少量的,不必要的脚本。在这种情况下,将脚本放在底部是有意义的,因此用户可以更快地看到图像并开始理解页面。其他页面依靠脚本工作。在这种情况下,有一个没有图像的工作页面比有图像的非工作页面更好,因此将脚本放在顶部是有意义的。
要考虑的另一件事是脚本通常比图像小。当然,这是一个概括,您必须查看它是否适用于您的页面。如果这样做的话,对我来说,这是将其放在第一位的经验(即除非有充分的理由这样做),因为它们不会像延迟图像那样延迟图像。最后,在顶部放置脚本要容易得多,因为您不必担心在需要使用它们时是否会加载它们。
总而言之,我倾向于默认情况下将脚本放在顶部,并且只考虑在页面完成后是否值得将它们移到底部。这是一种优化-我不想过早地做到这一点。
标准做法是将所有脚本放在页面底部,但是我将ASP.NET MVC与许多jQuery插件一起使用,并且我发现,如果将jQuery脚本放在<head>
母版部分中,效果会更好页。
就我而言,如果脚本位于页面底部,则在页面加载时会出现工件。我正在使用jQuery TreeView插件,并且如果一开始没有加载脚本,则树将在没有插件强制的CSS类的情况下呈现。因此,在页面首次加载时,您会得到这种看起来很滑稽的混乱,然后是TreeView的正确呈现。很不好看。将jQuery插件放在<head>
母版页的部分中可以消除此问题。
@Html.Action
,我只会遇到这个问题,它会动态地将结果写入输出,因为我的partial给出了$ is undefined
意思,我不得不使用.load('@ Url.Action')来加载partial。但这由于额外的要求而引起了关注。根据您的输入,我将把jquery移至我的母版页中的RenderBody()上方
尽管几乎所有网站仍将Jquery和其他javascript放在标头:D上,甚至请检查stackoverflow.com。
我还建议您在机身末端标记前戴上。您可以在放置在两个地方后检查加载时间。脚本标记将暂停您的网页以进一步加载。
并且在将JavaScript放在页脚之后,您的网页可能会出现异常的外观,直到它加载javascript,因此将CSS放在页眉部分。
</body>
根据Yahoo Developer Network的 “ 加快您的网站 速度的最佳做法 ”的最佳位置,此链接才刚刚出现,这很有意义。
最好的办法是自己进行测试。