Sim*_*one 185 jquery header footer
放置Jquery代码(或单独的Jquery文件)的最佳位置在哪里？如果我把它放在页脚中,页面会加载得更快吗？
3zz*_*zzy 227
脚本引起的问题是它们阻止了并行下载.HTTP/1.1规范建议浏览器每个主机名并行下载不超过两个组件.如果您从多个主机名提供图像,则可以并行执行两次以上的下载.但是,在下载脚本时,即使在不同的主机名上,浏览器也不会启动任何其他下载.在某些情况下,将脚本移到底部并不容易.例如,如果脚本使用document.write插入页面内容的一部分,则无法在页面中向下移动.可能还存在范围问题.在许多情况下,有办法解决这些问题.
经常出现的另一种建议是使用延迟脚本.DEFER属性指示脚本不包含document.write,并且是浏览器可以继续呈现的线索.不幸的是,Firefox不支持DEFER属性.在Internet Explorer中,脚本可能会延迟,但不是所需的.如果可以延迟脚本,也可以将其移动到页面底部.这将使您的网页加载速度更快.
编辑:自版本3.6以来,Firefox确实支持DEFER属性.
资料来源:
Cha*_*evy 185
应该最后加载所有脚本
几乎在每种情况下,最好将所有脚本引用放在页面的末尾,就在之前</body>.
如果由于模板问题等原因而无法执行此操作,请使用defer属性修饰脚本标记,以便浏览器知道在下载HTML后下载脚本:
<script src="my.js" type="text/javascript" defer="defer"></script>
边缘情况
还有一些边缘情况,但是,在这里你可能会遇到页面闪烁或页面加载过程中的其他文物,其通常可以通过简单地将您的jQuery脚本引用中要解决<head>的标签没有的defer属性.这些案例包括jQuery UI和其他插件,如jCarousel或Treeview,它们将DOM作为其功能的一部分进行修改.
进一步的警告
必须在DOM或CSS之前加载一些库,例如polyfill.Modernizr是一个必须放在head标签中的库.
vir*_*yes 30
当然只能通过CDN加载jQuery本身.
为什么？在某些情况下,您可能包含一个带有嵌入式jQuery依赖代码的部分模板(例如ajax登录表单片段); 如果在页面底部加载jQuery,则会出现"$ is not defined"错误,很好.
当然有办法解决这个问题(例如没有嵌入任何JS并附加到底部加载的js包),但为什么会失去延迟加载js的自由,能够在任何地方放置jQuery依赖代码？只要满足依赖项(如加载jQuery),Javascript引擎就不关心代码在DOM中的位置.
对于你的公共/共享js文件,是的,将它们放在之前</body>,但是对于例外,在html的那一点上,将应用程序维护明智地粘贴到jQuery依赖的片段或文件引用是有意义的,这样做.
在头部加载jquery没有性能损失; 这个星球上的什么浏览器还没有缓存中的jQuery CDN文件？
很多关于什么都不做的事情,坚持jQuery,让你的js自由统治.
EMP*_*EMP 13
Nimbuz对所涉及的问题提供了一个非常好的解释,但我认为最终的答案取决于你的页面:对于用户来说更重要的是什么 - 脚本或图像？
有些页面在没有图像的情况下没有意义,但只有轻微的,非必要的脚本.在这种情况下,将脚本放在底部是有意义的,这样用户可以更快地看到图像并开始理解页面.其他页面依赖于脚本来工作.在这种情况下,没有图像的工作页面比带有图像的非工作页面更好,所以将脚本放在顶部是有意义的.
另一件需要考虑的事情是脚本通常比图像小.当然,这是一个概括,你必须看看它是否适用于你的页面.如果确实如此,对我来说,这是一个将它们放在第一位作为经验法则的论据(即,除非有充分的理由不这样做),因为它们不会像图像延迟脚本一样延迟图像.最后,将脚本放在顶部会更容易,因为您不必担心在需要使用它们时是否已加载它们.
总之,我倾向于默认将脚本放在顶部,只考虑在页面完成后是否值得将它们移到底部.这是一个优化 - 我不想过早地做到这一点.
大多数jquery代码都是在文档准备好的情况下执行的,直到页面结尾才会发生这种情况.此外,页面呈现可以通过javascript解析/执行来延迟,因此最好将所有javascript放在页面底部.
标准做法是将所有脚本放在页面底部，但我使用 ASP.NET MVC 和许多 jQuery 插件，我发现如果我将 jQuery 脚本放在<head>master 部分，效果会更好页。
就我而言，如果脚本位于页面底部，则在加载页面时会出现工件。我正在使用 jQuery TreeView 插件，如果在开始时没有加载脚本，树将在没有插件强加给它的必要 CSS 类的情况下呈现。所以当页面第一次加载时，你会看到这个看起来很有趣的混乱，然后是 TreeView 的正确呈现。很不好看。将 jQuery 插件放在<head>母版页的部分可以消除这个问题。