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