gzip系列

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 代码
  1. <filter> 
  2.     <filter-name>AddHeaderFilter</filter-name> 
  3.     <filter-class
  4.         badqiu.web.filter.AddHeaderFilter 
  5.     </filter-class
  6.     <init-param> 
  7.         <param-name>headers</param-name> 
  8.         <param-value>Content-Encoding=gzip</param-value> 
  9.     </init-param> 
  10. </filter> 
  11.  
  12. <filter-mapping> 
  13.     <filter-name>AddHeaderFilter</filter-name> 
  14.     <url-pattern>*.gzjs</url-pattern> 
  15. </filter-mapping> 

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

Java 代码
  1. <html> 
  2. <head> 
  3. <!-- type="text/javascript"不可少,有些浏览器缺少这个不能运行,具体已经忘记 了 --> 
  4. <script src="prototype.gzjs" type="text/javascript"></script> 
  5. </head> 
  6. <body> 
  7.     <input id="username" name="username" value="badqiu"/><br /> 
  8.     <input id="email" value="[email protected]"/> 
  9. <script> 
  10.     <!-- 测 试prototype的方法是否正常--> 
  11.     alert($F('username')) 
  12. </script> 
  13. </body> 
  14. </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,我心理平衡一下,嘿嘿。


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1