服务端合并和压缩JS和CSS文件
来源:随网之舞 发布时间:2010-06-11 18:23:00
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。CSS Sprites和图像映射现在已经随处可见了,但由于IE6和IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScript和CSS文件数量和开发时一致,少量的网页会根据实际情况采取本地合并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。
YUI Combo Handler
2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScript和CSS文件,从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件,常用方式如下:
<script src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>
而使用Combo Handler服务之后,则上述的代码可以写为:
<script src="http://yui.yahooapis.com/combo?
2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js&
2.8.0r4/build/container/container_core-min.js&
2.8.0r4/build/menu/menu-min.js&
2.8.0r4/build/element/element-min.js&
2.8.0r4/build/button/button-min.js&
2.8.0r4/build/editor/editor-min.js"></script>
除了代码的可读性稍稍有一点点降低外,使用Combo Handler服务大大的降低了HTTP请求数,同时也减少了URL代码量,这对于Web性能优化来讲至关重要。所以,随后YUI从2.6.0开始,其核心组件YUI Loader内置了Combo Handling功能,即使用YUI Loader时,通过配置combine属性就可以把要加载的多个JavaScript或CSS文件按照使用Combo Handler服务的形式合并起来,这时只要静态文件的服务器支持Combo Handler就行了。在YUI中当combine配置为true时,CDN默认是使用Yahoo! CDN(http://yui.yahooapis.com),所以没有任何问题。这正是YUI最迷人的地方之一。
遗憾的是http://yui.yahooapis.com在中国的速度并不佳,本来中国雅虎提供http://cn.yui.yahooapis.com/ ,但尚未提供Combo Handler服务,同时因种种原因,其更新在YUI 2.7.0之后就停滞了。更糟糕的是Yahoo!开发的支持Combo Handler的Apache模块虽然据传有计划开源,但至少现在依旧是私有技术,要使用就需要自己实现类似功能,所以国内类似技术的应用并不太多。
猜你喜欢
- 这年头.PR值可以说是经典鸡肋(或许是我个人看法吧)在SEO火爆的07-08年.因为这玩意儿在排名中的作用微乎其微.所以在意的人也越来越少.
- phpwind官方论坛于近日升级至phpwind 8.7 beta版,phpwind论坛用户如需体验更多新功能,可到官方体验站参与体验(ti
- 命令格式如下:用法: shutdown.exe [-i | -l | -s | -r | -a] [-f] [-m \\computerna
- 昨日看到Heyi的博客上布满了关键字的链接,而我又对这些链接的分布有一些不同的想法,很早的时候曾经写过谈链接的艺术一文,其中只简单的说明了链
- 据国外媒体报道,微软董事会主席比尔·盖茨(Bill Gates)周二表示,互联网技术将在今后十年发生巨大变革。盖茨是在受韩国总统李明博接见时
- 1、锚文字:用于链接的文字;可直接影响SEO效果。锚文字可以不同,但是每个锚文字都应该是跟网站主题相关的,而且最好是我们所希望的目标关键词。
- 一个网络媒体(网站)会包含有数十个甚至成千上万个页面,站点为获得生存,一般都需要在站点投放网络广告。网络广告所投放的位置和价格就牵涉到特定的
- Apahce服务器是一个稳定的、商业性的和公开程序源代码的HTTP服务器。其在HTTP市场中占有主导性的地位。据权威部门统计,Apache服
- Google Adsense广告的最佳位置我的实践证明,blog中adsense的最佳位置应该在文章标题
- 网页尽可能的快速加载对网站非常重要;用户希望快速的查看他们想要看的页面,假如你不能满足他们,他们就会另寻它处。在这篇文章中,你会看到五种为你
- 影响版本:BBSGood 5.0/5.0.2漏洞描述:BBSGOOD是国内首创使用缓存技术的论坛,BBSGOOD的帖子和列表首页是可以生成静
- 一、定位1、网站的前景。网站的定位直接影响到日后的盈利模式,因此网站的发展方向、受众群体、受众的多少起了决定性的作用。2、自身的优势。看看自
- 打算做个下半场营销软件下载站。放上去谷歌广告adsense后,发现杂得也不给我显示。后来找到了原因,我的站应该是属于谷歌官方所说的“版权材料
- 如何从博客中扩展我们的外部链接。但需要申明一点的是:思亿欧所说的不是通过大量注册博客增加自己链接的方式。而是,参与到跟自己主题相关的博客中分
- 11月20日 谷歌在11月初发布了Chrome 4.0首个Beta版,并引入用户较为看重的书签同步功能,但扩展功能尚有欠缺。近日谷歌将推出一
- 这样, root 就可以直接进入 Linux 主机了。不过,建议不要这样做。也可以在普通用户进入后,切换到root用户,拥有root的权限。
- 北京时间12月3日消息,据国外媒体报道,微软网络服务部门高级副总裁萨提娅·纳德拉今天表示,通过付费使出版商和新闻机构屏蔽Google搜索引擎
- 通过对“大龄文艺女青年之歌”的成功炒作,使邵美女迅速走红。精准的多点切入为这次炒作奠定了良好的基础,准确把握受众心里更是这次营销成功的核心。
- 人们或许都有这样一个困惑:计算机在网络上通讯时本来只能识别如“123.123.123.123”之类的数字地址,那么为什么当我们打开浏览器,在
- 1、内容是SEO的基础,关键词是SEO的核心,链接是SEO的关键,UEO是SEO的深化。2、SEO做得好的网站都是一样的,SEO做得不好的网