在处事端归并和压缩JavaScript和CSS文件

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模块固然据传有打算开源，但至少此刻仍旧是私有技能，要行使就必要本身实现相同成果，以是海内相同技能的应用并不太多。

Minify

在Google Code上有一个PHP的开源项目叫Minify，它可以归并、精简、Gzip压缩缓和存JavaScript和CSS文件。其文件归并成果就很是相同Combo Handler，只不外URL的语法轻微有点差异。假如Yahoo! CDN安装了Minify，那么上面Rich Text Editor的代码用Minify的默认名目来写就是：

<script src="http://yui.yahooapis.com/min/f=
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>

当地行使Minify很简朴，只必要Apache + PHP情形就OK了：

1. 安装好Apache + PHP (Windows、Mac)。
2. 下载Minify源码，解压，然后把min文件夹复制到指定的根目次下，好比localhost。这时URL的写法或许是http://localhost/min/f=...
3. 启用Apache的Mod Rewrite模块，然后在min文件夹下新建.htaccess文件，并添加如下Rewrite法则：

   <IfModule mod_rewrite.c>
   RewriteEngine on
   
   # You may need RewriteBase on some servers
   #RewriteBase /min
   
   # rewrite URLs like "/min/f=..." to "/min/?f=..."
   RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
   </IfModule>

   假如不启用Mod Rewrite成果，则Minify的URL会相同http://localhost/min/index.php?f=…，这对客户端和中间处事器的缓存倒霉，而启用了Mod Rewrite之后的URL相同http://localhost/min/f=…，不只办理前面题目且更短。

4. 设置Minify，即编辑min/config.php文件

   $min_enableBuilder = true;
   //当地行使时可以通过http://dwn/min/builder/来举办设置，外部行使时请配置为false
   
   //$min_cachePath = 'c:WINDOWSTemp';
   //$min_cachePath = '/tmp';
   //$min_cachePath = preg_replace('/^d+;/', '', session_save_path());
   //选择其一，去掉注释配置姑且缓存目次，这样可以镌汰措施运算进步机能
   
   $min_serveOptions['maxAge'] = 1800;
   //配置赏识器缓存的时刻，为了晋升机能提议这个时刻配置尽也许的长，好比315360000
   //假如必要在不改变URL的环境下更新静态文件，可以回收相同时刻戳的方法，
   //如http://localhost/min/f=example/example.css&20100601.css
   //提议静态文件回收版本号打点，每次修改都必要进级版本号，这样就无需时刻戳了，
   //如http://localhost/min/f=example/example_1_0_1.css
   
   $min_serveOptions['minApp']['maxFiles'] = 10;
   //参数f获取参数的个数，即归并的文件个数，这个数目完全可以增大，好比50，
   //虽然也许会碰着URL最大值题目，后会有表明
   

5. 行使Minify

   （编辑：河北网）

   【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!