我现在有大约7个Javascript文件(感谢各种jQuery插件)和4-5个CSS文件.我很好奇处理这些问题的最佳做法是什么,包括文档中应该加载哪些内容？YSlow告诉我,Javascript文件应该 - 如果可能 - 最后包括在内.身体的尽头？它提到了分隔符似乎是他们是否写内容.我所有的Javascript文件都是函数和jQuery代码(所有这些都在ready()时完成)所以应该没问题.
那么我应该包含一个CSS和一个Javascript文件,并包含其余的？我应该将所有文件连接成一个吗？我应该在文档的最末端放置Javascript我的标签吗？
编辑: FWIW是的,这是PHP.
我的Web应用程序使用jQuery和一些jQuery插件(例如验证,自动完成).我想知道是否应该将它们粘贴到一个.js文件中,以便可以更轻松地缓存它,或者将它们分解为单独的文件,并且只包含我需要的给定页面.
我还要提一下,我关注的不仅是下载.js文件所需的时间,还包括根据加载的.js文件的内容减慢页面的速度.例如,添加自动完成插件往往会使我的基本测试的响应时间缩短100ms,即使在缓存时也是如此.我的猜测是它必须扫描DOM中导致此延迟的元素.
想象一下,一个拥有数十个页面组(pg1,pg2,...)的Web应用程序,其中一些页面组只需要一些特定于它们的JavaScript代码,而不是整个应用程序.例如,window.resize()上的一些可视化修复可能仅与pg2相关,但与其他地方无关.
这是一些可能的解决方案:
1 /集中化:为整个应用程序提供一个处理所有页面组的脚本文件.很容易知道相关的DOM对象是否存在,所以所有不相关的页面只是做一个小的额外的if().最大的优点是所有JS都为整个Web应用程序加载一次,并且不需要修改HTML代码.缺点是对不相关的页面添加了额外的检查.
2/Mixed:集中式脚本检查页面上是否存在特定功能,如果存在则启动它.例如,我们可以添加一个
if (typeof page_specific_resize === 'function') page_specific_resize();
在这种情况下,特定页面组将具有:
<script>
function page_specific_resize() {
//....
}
</script>
优点是代码仅存在于相关页面,因此不会在每个页面上进行测试.缺点是整个页面组中HTML结果的额外大小.如果有多行代码,页面组可能能够加载特定于其的附加脚本,但之后我们在那里添加一个http调用,可能会在集中式脚本中节省几公斤.
哪种是最佳做法？请评论这些解决方案或建议您自己的解决方案.添加一些资源来支持您声称的更好(考虑性能和易维护性)将是很好的.将选择最详细的答案.谢谢.
在当前的Web项目中,我使用了几个jQuery插件并在关闭body标签之前初始化它们.我的问题是,从加载时间/性能的角度来看,我最好将所有这些初始化并将它们复制到一个外部化的js文件中吗？插件在网站的所有页面中以相同的方式进行初始化,因此看起来加载一个,集中文件最好,不是吗？感谢您的任何反馈.
最近阅读了雅虎的网络优化提示和使用YSlow我已经在我的一个网站http://www.gwynfryncottages.com上实现了他们的一些想法,你可以在这里查看文件http://www.gwynfryncottages.com /js/gw-custom.js.
虽然这种技术似乎在大多数情况下都能很好地工作,并且确实加速了网站,但我确实注意到当我在网站上工作时,javascripts没有加载或者没有完全加载的错误数量明显增多所以三个问题: -
在可靠性方面,将脚本组合在一起是一个好主意吗？
有没有办法测量错误的数量,即脚本加载失败的次数？
有没有办法"预加载"javascript或确保减少加载错误的数量？