找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2551|回复: 0

[分享] 在服务端合并和压缩JavaScript和CSS文件

[复制链接]
发表于 2013-4-24 16:38:30 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScriptCSS文件、CSS Sprites图像映射(Image Map)使用Data URI来编码图片CSS Sprites和图像映射现在已经随处可见了,但由于IE**IE7不支持Data URI以及性能问题,这项技术尚未大量使用。目前大部分网页中的JavaScriptCSS文 件数量和开发时一致,少量的网页会根据实际情况采取本地合 并,这些合并中相当多的是有选择地手动完成,每次新的合并都需要重新在本地完成并上传到服务器,比较的随意和繁琐,同样文件的压缩也有类似的情况。而利用 服务端的合并和压缩,我们就可以按照开发的逻辑尽可能让文件的颗粒度变小,利用网页中URL的规则来自动实现文件的合并和压缩,这会相当的灵活和高效。
YUI Combo Handler
2008年7月YUI Team宣布在YAHOO! CDN上对YUI JavaScript组件提供Combo Handler服务。Combo Handler是Yahoo!开发的一个Apache模块,它实现了开发人员简单方便地通过URL来合并JavaScriptCSS文件,从而大大减少文件请求数。比如在页面上使用YUI2的Rich Text Editor组件需要引入多个JavaScript文件,常用方式如下:
1
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/ yahoo-dom-event.js"></script>

[backcolor=rgb(248, 248, 248) !important]
2
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/container/ container_core-min.js"></script>

3
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"></script>

[backcolor=rgb(248, 248, 248) !important]
4
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"></script>

5
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"></script>

[backcolor=rgb(248, 248, 248) !important]
6
<script src="[color=blue !important]http://yui.yahooapis.com/2.8.0r4/build/editor/editor-min.js"></script>



而使用Combo Handler服务之后,则上述的代码可以写为:
1
<script src="[color=blue !important]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属性就可以把要加载的多个JavaScriptCSS文件按照使用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模块虽然据传有计划开源,但至少现在依旧是私有技术,要使用就需要自己实现类似功能,所以国内类似技术的应用并不太多。

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-1 13:30 , Processed in 0.045396 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表