gzip系列

09 Jun 2011 in php / Web / Web前端 on gzip - Hits()

ie5就开始支持gzip了[待考证,反正ie6是支持的]

传统的JS压缩(删除注释,删除多余空格等)提供的压缩率有时还是不尽不意, 幸亏现在的浏览器都支持压缩传输(通过设置http header的Content-Encoding=gzip),可以通过服务器的配置(如apache)为你的js提供压缩传输,或是appfuse中使用的GZipFilter使tomcat也提供这种能力

现在的问题是这种动态的压缩会导致服务器CPU占用率过高,现在我想到的解决辨法是通过提供静态压缩(就是将js预先通过gzip.exe压缩好)

一.下面描述在tomcat中的应用
httpServletResponse.setHeader("Content-Encoding", "gzip");//主要是这一句，但是如果仅仅加个header,让容器自己输出的话，没有起作用，返回流的头部还是没有gzip信息,所以还得自己负责返回文件流，这个又加重了服务端cpu,但是减少了带宽。
对于chrome,还要返回Content-Type,否则会被忽略
httpServletResponse.setHeader("Content-Type", "text/plain");//这只对于非图片类型

对于safari,直接.gz为扩展名的它处理有问题，要改成别的如.jgz

1.将prototype.js通过gzip.exe压缩保存成prototype.gzjs
2.设置header,我编写了一个简单的AddHeadersFilter来将所有以gzjs结尾的文件增加设置header Content-Encoding=gzip
web.xml中的配置

Java 代码

<filter>
<filter-name>AddHeaderFilter</filter-name>
<filter-class>
badqiu.web.filter.AddHeaderFilter
</filter-class>
<init-param>
<param-name>headers</param-name>
<param-value>Content-Encoding=gzip</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>AddHeaderFilter</filter-name>
<url-pattern>*.gzjs</url-pattern>
</filter-mapping>

测试prototype.js是否正常的代码

Java 代码

<html>
<head>
<script src="prototype.gzjs" type="text/javascript"></script>
</head>
<body>
<input id="username" name="username" value="badqiu"/><br />
<input id="email" value="badqiu@gmail.com"/>
<script>
alert($F('username'))
</script>
</body>
</html>

在Apache httpd中可以直接通过在httpd.conf增加AddEncoding x-gzip .gzjs来映射.gzjs文件的header

二.相关压缩率数据
1. prototype.js 1.5.0_rc0原始大小56KB,未经任何处理直接使用gzip压缩为12KB,总压缩率79%
2. 通过js压缩工具压缩过的protytype.js为20KB,使用gzip压缩为10KB,总压缩率为83%
3. 实际项目中的多个js合并成的文件 439KB,直接通过gzip压缩为85KB,总压缩率81%
4. 439KB经过js压缩为165KB,再经过gzip压缩为65KB,总压缩率86%

基本上你都可以忽略js压缩工具的压缩率,直接使用gzip压缩

gzip下载地址 http://www.gzip.org
tomcat的压缩配置示例下载地址: http://www.blogjava.net/Files/badqiu/gziptest.rar

==================================================================

Wordpress之终极Gzip兼容IE6

为了这Gzip我可没有少费功夫啊，之前我已经写过三篇文章《开启GZIP，提速 Wordpress》、《给Wordpress开启Gzip 功能》、《完美启用Gzip压缩JS、 CSS》，三篇文章三个方法，各有特色，一直以来我是将这三个Gzip结合使用的，但是始终没有达到我期望的最佳效果，因为启用后就不得不放弃 IE6的用户。这一bug让我在使用Gzip时很尴尬，之后我也试过给浏览器设置白名单，希望IE6跳过Gzip，最后以失败告终。不过今天终于让我找到一个可以兼顾IE6的开启Gzip的方法，让我的Wordpress载入速度又上了一个台阶。特地将此方法转载来和大家分享，因为原文是繁体，我就简化了一下：

1、下载gzip.zip，解压后上传至网站根目录。

2、修改根目录的.htaccess，增加gz的识别支援及网址改写：

#識辨gz檔案的支援
<Files *.js.gz>
AddEncoding gzip .js
ForceType application/x-javascript
</Files>
<Files *.css.gz>
AddEncoding gzip .css
ForceType text/css
</Files>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

#wordpress靜態網址，如果沒有使用，就略過
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

#讀到css和js檔，就重導至gzip.php
RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

#讀到.css，判斷如果瀏覽器支援gzip且.css.gz檔存在，就進行重導
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).css $1.css.gz [L,QSA]

#讀到.js，判斷如果瀏覽器支援gzip且.js.gz檔存在，就進行重導
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*).js $1.js.gz [L,QSA]
</IfModule>

3、浏览自己的网站，让CSS和JS产生gz档，并将相应的.gz文件权限设置为777。

4、最后，再次改写.htaccess，把以下代码注释掉或删除。

RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

完毕。此Gzip方法是至今我最满意的，效果最显著的，强烈推荐。不过在修改CSS和JS后，还要还原那句代码并重做第3、4步。所以该方法稍有些复杂，比较适合像我一样喜欢折腾Wordpress的童鞋们。

给 Wordpress 开启 Gzip 功能

曾经我为了给 Wordpress 开启 Gzip 功能真是煞费苦心，但最终还是成功了，并写下日志《开启GZIP，提速 Wordpress》分享给大家。据willin的反馈，他使用该方法感觉不错，但是我自己用这个方法却发现主题在IE6下裸奔了，至今没有找到问题的根源，之后只好弃用了该方法。郁闷～

但是我一直没有放弃对开启 Gzip 的追求，皇天不负有心人，终于让我找到了两个给 Wordpress 开启 Gzip 的方法，且比在《开启GZIP，提速 Wordpress》中提到的方法更简单，更实用，也没有在 IE6 下裸奔的现象，值得推荐。至于什么是 Gzip、如何检测网站是否开启 Gzip 功能等问题本文就不多作熬述了，欲知答案请移步《开启GZIP，提速 Wordpress》。下面马上切入正题：

方法一：

gzippy 插件。

这对于懒人或者菜菜们来说是个福音和首选，这个插件解压后也不足2K，可谓短小精悍，且上传安装之后也无需另外设置，很方便实用。

下载地址：http://wordpress.org/extend/plugins/gzippy/

方法二：

定义 php.ini。

新建一个名为 php.ini 的文件，输入以下内容，保存并上传至网站根目录即可。

output_buffering = Off
output_handler =
zlib.output_compression = On

因为本人对插件有抵触情绪，能用代码搞定的就绝不用插件解决！所以我现在用的是方法二，压缩率达到73%，还是比较让人满意的。现在我的 YSlow 成绩又回到了 Grade B，真要感谢 Gzip 的压缩功能啊.

完美启用Gzip压缩JS、CSS

这已经是我自《开启GZIP，提速 Wordpress》和《给Wordpress开启Gzip 功能》两篇文章后第三次介绍Wordpress中的Gzip功能，而这三篇中所涉及的Gzip又各有不同，可以结合实用。在《给Wordpress开启Gzip 功能》中提到的Gzip功能很简单，但是只对Wordpress输出的html进行压缩，所以效果有限。而这篇文章提及的Gzip功能将对 Wordpress中的重头戏JS和CSS进行压缩，这将使Wordpress的载入速度达到一个质的飞跃！

1、把模板目录下的style.css复制一份出来，命名为style.css.php，接着在style.css.php顶部加入这句：

<?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

在最后加上下面代码：

<?php if(extension_loaded('zlib')) {ob_end_flush();} ?>

2、按照下面的方式修改header.php中的css连接

原来的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css"/>

修改后的：

<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>

这样，你的CSS就被Gzip压缩了，同样的方法可以压缩你的JS。只是在JS的顶部加入的是如下代码：

<?php if ( extension_loaded('zlib') ) {ob_start('ob_gzhandler');} header("Content-Type: text/javascript"); ?>

说说我自己使用Gzip压缩后的效果吧，在《开启GZIP，提速 Wordpress》中我就提到，根据YSlow的要求，其中Compress components with gzip这项，我的得分仅为F，严重地影响了小站的整体评级。开启Gzip之后，我再用YSlow去检测，现在我的得分是Grade A！再贴个图让各位有个直观的理解，看看我的JS和CSS减了多少肥吧。JS和CSS的大小从102.1K直降到33.8K，足足减少了三分之二的文件大小，如果你有用prototype.js这样的大型JS，那压缩之后的效果就更可观了。！

开启此Gzip功能比《给Wordpress开启Gzip 功能》中提到的Gzip要复杂的多，因为要对所有JS和CSS一一修改，且要找到并修改调用该JS和CSS的代码，如果你还是刚刚踏入 Wordpress大家庭的小菜菜，那我还是建议你用《给Wordpress开启Gzip 功能》中的插件或php.ini来实现Gzip。

最后友情提醒一下，因为使用此Gzip，需要修改比较多的文件和代码，所以记得备份哟，如果做错也好有个挽回的余地。

开启GZIP，提速Wordpress

今天我用FireFox的YSlow组件对小站进行了评测，结果仅为Grade C，实在是差强人意。虽然自认为本站的速度已经算是很不错了，话说自从换了小张童鞋的息壤主机后，小站的速度也是突飞猛进，但是为了满足小小的虚容心和完美主义性格，Grade C的结果在我看来是不合格的，我的目标是Grade A！我需要优化、优化、再优化，提速、提速、再提速！

根据YSlow的要求，其中Compress components with gzip这项，我的得分仅为F，严重地影响了小站的整体评级。本文也就重点谈谈如何开启GZIP压缩网页从而给Wordpress提速。

三言两语先简单介绍下GZIP功能，我G来的。GZIP功能可以大幅度地压缩CSS、JS之类的文本型文件，压缩率达60％－90％，挺可观的。GZIP压缩功能在Wordpress2.3-2.5版本里都是自带的，之后就没有了，我现在用的是Wordpress2.7.1，就更没有这个功能了。那如何手动开启Wordpress2.7+的GZIP功能呢？

在开始之前，我们先做点准备工作，你也可以用YSlow查一下你的网站评级，然后登陆http://www.whatsmyip.org/mod_gzip_test/检测一下你的网站是否已经开启了GZIP，等事后可以作个比较。下面是我开启GZIP之前的测试截图。

wange.im

废话到此为止，进入正题。

1.开启GZIP功能。在根目录下的index.php找到

define(’WP_USE_THEMES’, true);

在其后插入如下代码：

if(ereg(’gzip’,$_SERVER['HTTP_ACCEPT_ENCODING'])){//判断浏览器是否支持Gizp
if(substr($_SERVER['REQUEST_URI'],0,10)!=’/download /’)//排除不需要Gzip压缩的目录
ob_start(’ob_gzhandler’);//打开Gzip压缩
}

2.在.htaccess里面加上RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]

如果你那可怜的主机不支持.htaccess可写，很遗憾，你就不用往下看了。

3.压缩CSS和JS文件。你可以复制以下代码保存为gzip.php，或者点此下载我的gzip.php文件，下载解压之后上传至根目录即可。让所有的CSS和JS文件访问就以相对根目录的路径以GET变量传递到了gzip.php，交给gzip.php来全权处理了。

<?php
define('ABSPATH', dirname(__FILE__).'/');

$cache = true;//Gzip压缩开关
$cachedir = 'wp-cache/';//存放gz文件的目录，确保可写

$gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');
$deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], 'deflate');
$encoding = $gzip ? 'gzip' : ($deflate ? 'deflate' : 'none');

if(!isset($_SERVER['QUERY_STRING'])) exit();

$key=array_shift(explode('?', $_SERVER['QUERY_STRING']));
$key=str_replace('../','',$key);

$filename=ABSPATH.$key;

$symbol='^';

$rel_path=str_replace(ABSPATH,'',dirname($filename));
$namespace=str_replace('/',$symbol,$rel_path);

$cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).'.gz';//生成gz文件路径

$type="Content-type: text/html"; //默认的类型信息

$ext = array_pop(explode('.', $filename));//根据后缀判断文件类型信息
switch ($ext){
case 'css':
   $type="Content-type: text/css";
   break;
case 'js':
   $type="Content-type: text/javascript";
   break;
default:
   exit();
}

if($cache){
if(file_exists($cache_filename)){//假如存在gz文件

$mtime = filemtime($cache_filename);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) == $gmt_mtime)
){

   // 浏览器cache中的文件修改日期是否一致，将返回304
   header ("HTTP/1.1 304 Not Modified");
   header("Expires: ");
   header("Cache-Control: ");
   header("Pragma: ");
   header($type);
   header("Tips: Cache Not Modified (Gzip)");
   header ('Content-Length: 0');

}else{

   //读取gz文件输出
   $content = file_get_contents($cache_filename);
   header("Last-Modified:" . $gmt_mtime);
   header("Expires: ");
   header("Cache-Control: ");
   header("Pragma: ");
   header($type);
   header("Tips: Normal Respond (Gzip)");
   header("Content-Encoding: gzip");
   echo $content;
}

}else if(file_exists($filename)){ //没有对应的gz文件

$mtime = mktime();
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

$content = file_get_contents($filename);//读取文件
$content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//压缩文件内容

header("Last-Modified:" . $gmt_mtime);
header("Expires: ");
header("Cache-Control: ");
header("Pragma: ");
header($type);
header("Tips: Build Gzip File (Gzip)");
header ("Content-Encoding: " . $encoding);
header ('Content-Length: ' . strlen($content));
echo $content;

if ($fp = fopen($cache_filename, 'w')) {//写入gz文件，供下次使用
                fwrite($fp, $content);
                fclose($fp);
            }

}else{
header("HTTP/1.0 404 Not Found");
}
}else{ //处理不使用Gzip模式下的输出。原理基本同上
if(file_exists($filename)){
$mtime = filemtime($filename);
$gmt_mtime = gmdate('D, d M Y H:i:s', $mtime) . ' GMT';

if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&
array_shift(explode(';', $_SERVER['HTTP_IF_MODIFIED_SINCE'])) == $gmt_mtime)
){

header ("HTTP/1.1 304 Not Modified");
header("Expires: ");
header("Cache-Control: ");
header("Pragma: ");
header($type);
header("Tips: Cache Not Modified");
header ('Content-Length: 0');

}else{

header("Last-Modified:" . $gmt_mtime);
header("Expires: ");
header("Cache-Control: ");
header("Pragma: ");
header($type);
header("Tips: Normal Respond");
$content = readfile($filename);
echo $content;

}
}else{
header("HTTP/1.0 404 Not Found");
}
}

搞定，再去http://www.whatsmyip.org/mod_gzip_test/检测一下你的网站是否已经开启了GZIP，如果上述步骤都操作正确，那测试结果应该如下图所示。

wange.im

既然已经对CSS和JS文件压缩了，那我们再用YSlow来评测一下等级。Oh耶！我的小站从Grade C上升到Grade B了，不过说实话，虽然把CSS和JS文件压缩了72％，但并没有很明显地提速，因为本来就已经够快的了，哈哈。

说些题外话，根据YSlow的要求，我的小站要从Grade B上升到Grade A怕是有些难度了。因为首页上加载了两个Flash，还有5个JS，拖慢了不少速度，等会有时间我研究下把这5个JS合并，或许会好些吧。我又查了下新浪、网易、搜狐这样的大型门户网站，也不过Grade B甚至Grade C，我心理平衡一下，嘿嘿。