速度优化之GZIP对jscss压缩

由于现在用户对审美的不断提高，很多网站基本上，开始大量使用js和css来做特效，来增加客户体验，虽然这样网页是好看了，这时大家发现了一个问题，在 服务器带宽一定的情况下，多用户并发访问速度变慢。这该怎么办呢？这时就有浏览器开始支持Gzip压缩了，这个技术是怎么实现的呢？这就是我们今天讲的重 点。
   其实很简单原理就是通过GZip压缩js以及css，然后传入到浏览器解压，再显示的过程，一般压缩了的会比原先的小70%左右。
   第一步,通过火狐了解gzip的压缩，就是让你看看他是不是支持gzip解压。如图
   

下载 (477 Bytes)
cp gzip

半小时前

   第二步，怎么用php实现css以及js的压缩呢？如下代码
   <?php
        /**
        *@a.header(...这一行是设置压缩文件类型的,如果你要压缩js文件就将text/css改成text/javascript
        *@b.include(...此处包含你要压缩的文件,多个按你现在的顺序依次用include("...");调用
        */
        if(extension_loaded('zlib')){//检查服务器是否开启了zlib拓展
            ob_start('ob_gzhandler');
          }
          header ("content-type: text/css; charset: utf-8");//在这里设置要压缩的文件类型
          header ("cache-control: must-revalidate");          $offset = 60 * 60 * 240;//文件的距离现在的过期时间，这里设置为一天
          $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
          header ($expire);
          ob_start("compress");
          function compress($buffer) {//去除文件中的注释
              $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
              return $buffer;
            }
          include("style.css");//在此处包含你所要压缩的文件,多个请用include包含后依次排列
          if(extension_loaded("zlib")){
            ob_end_flush();//输出buffer中的内容
        }
        ?>
    第三步，实现js以及css的调用，代码如下
   例如原先的css：
  <link rel="stylesheet" media="screen" href="http://mrthink.net/wp-content/themes/zsofa/style.css">
   调用gzip的css：
  <link rel="stylesheet" media="screen" href="http://mrthink.net/wp-content/themes/zsofa/css.php?v=100415">
   js的代码需要注意在上面Content-type修改header ("content-type: text/css; charset: utf-8");成为header ("content-type:application/x-javascript; charset: utf-8");
   js调用代码修改为：script type="text/javascript" src="http://www.icon52.net/scripts/autoSuggest.js.php?v=121>
   介绍完毕，在cp中使用GZip压缩整个网页。
   如下代码：