我想在关闭</body>
-Tag 之前放置 jQuery,就像推荐的那样。但是因为我使用的是内容管理系统,所以需要 jQuery 的内联脚本将在结束 body 标记之前执行。
我现在的问题是:是否值得在数组中收集基于 jQuery 的脚本并在加载 jQuery 时在文档末尾运行它们(EXAMPLE)或者只是在头部加载 jQuery?
我想在关闭</body>
-Tag 之前放置 jQuery,就像推荐的那样。但是因为我使用的是内容管理系统,所以需要 jQuery 的内联脚本将在结束 body 标记之前执行。
我现在的问题是:是否值得在数组中收集基于 jQuery 的脚本并在加载 jQuery 时在文档末尾运行它们(EXAMPLE)或者只是在头部加载 jQuery?
您可以采用此处描述的方法
q
这个想法是很快在标题中创建一个全局变量,并使用一个临时window.$
函数来收集所有依赖于 jQuery 的代码/函数/插件。
window.q=[];
window.$=function(f){
q.push(f);
};
在你加载 jQuery 之后,你会将所有函数传递给真正的$.ready
函数。
$.each(q,function(index,f){
$(f)
});
通过这种方式,您将能够在 jQuery lib 包含之前安全地包含您的 jquery 代码
如果这可能比在头部加载 jQuery 更好,那可能取决于您必须将多少代码推送到q
临时函数中。
放置到<head>
section 中的 jQuery 需要一个单独的阻塞script
。但是如果你有很多代码要在文档中的任何地方注入,你可能会有很多巨大的阻塞脚本来停止渲染过程。
相反,在 dom 就绪事件之后加载大量脚本可以很容易地使您的页面加载速度更快,因此这种方法更好,并且好处可以更加明显。
所以没有一个对所有代码和所有页面都有效的明确答案:即使这种技术通常是好的和可取的(因为你有尽可能晚的脚本执行的好处),你应该做一些使用这两种方法进行测试并查看加载和渲染时间。开头的文章对性能有一些考虑,但也解释了为什么stackoverflow没有使用它。
只需在头部加载 jQuery,它会在第一次加载后被缓存,之后不会减慢任何速度。
其他一切听起来都像是过头了,我不确定性能的提升是否会如此显着以证明额外工作的合理性。
有时,如果您的页面在底部使用 javascript 加载缓慢,则可能需要更长的时间才能加载,这意味着没有 javascript 的视觉效果可能是可见的,并且无法为用户提供如此好的体验。