启用Gzip缩短网页下载时间

标签:PHP

昨天在主页上放了个MacOS的导航条,华丽是很华丽,但由于加了2个总计30多k的js文件,导致网页打开慢了不少。

所以查了查网页的压缩办法,启用Gzip压缩是最有效的,Discuz!就启用了这个功能。
而且即使压缩了,浏览器也不必等全部传完才能解压和解析。我做了个测试,一个约2MB的网页,被压缩到1MB左右,我完全下载完大概要8秒,但只花了不到2秒,里面的一段javascript代码就已经生效了。

不过启用Gzip压缩会占用cpu,所以服务器一般都只开放这个功能,但需要你去调用才会有效。这样就有个缺陷,启用后主页就得弄成php文件了(除非rewrite)。所以不想弄成动态网页的,就先看看怎么压缩js文件吧。

方法很简单,我从这找来的: http://hellobmw.com/archives/compressing-javascript-with-phpgzip.html

首先要保证服务器支持gzip压缩,浏览器也支持解压(我试了IE6、firefox3和chrome0.3都支持)。
前者可以在php文件里用phpinfo()函数查看。(例如我用的服务器就能看到这条:ZLib Support    enabled)
后者可以在php文件里这样判断
<?php
	if (strpos($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip') === false)
	{
		//不支持Gzip
	}
	else
	{
		//支持Gzip
	}
?>
然后就是改写js文件了,在每个js文件最前面加上这段代码,然后把后缀名从js改为js.php:
<?php
ob_start('ob_gzhandler');
header("Cache-Control: public");
header("Pragma: cache");
$offset = 60*60*24*60; //这个是过期时间,最后的60表示60天,自己按情况修改
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s",time() + $offset)." GMT";
$LmStr = "Last-Modified: ".gmdate("D, d M Y H:i:s",filemtime(__FILE__))." GMT";
header($ExpStr);
header($LmStr);
header('Content-Type: text/javascript; charset: UTF-8'); //编码看自己的情况设置,还可以是text/css之类的
?>
最后更改你的JavaScript调用方式,如:
<script type="text/javascript" src="test.js"></script>
改为
<script type="text/javascript" src="test.js.php"></script>
css文件的处理方式相同,把text/javascript改为text/css就行了。
html更简单,把那行去掉就行了(因为一般你的html文件都会在head里写上类似下面的一句;没写的话,你就改成text/html吧),然后把后缀名改为php
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
如果想测试有没有效果的话,可以去这个网站,在右下角输入你的网页的URL即可
http://www.pipeboost.com
如果你没有自己的网页,可以提交这个网页看看被压缩了多少:
http://www.keakon.cn/text_image/CG11A.php

如果你觉得压缩效果还不理想,可以试试下面这段代码,把压缩级别设为最高:
以下代码来自 http://www.webjx.com/php/2008-03-23/4915.html
<?php
ob_start('ob_gzip');
header("Cache-Control: public");
header("Pragma: cache");
$offset = 60*60*24*60;
$ExpStr = "Expires: ".gmdate("D, d M Y H:i:s",time() + $offset)." GMT";
$LmStr = "Last-Modified: ".gmdate("D, d M Y H:i:s",filemtime(__FILE__))." GMT";
header($ExpStr);
header($LmStr);
header('Content-Type: text/javascript; charset: UTF-8');
function ob_gzip($content)
{ 
if(!headers_sent() && extension_loaded("zlib") && strstr($_SERVER["HTTP_ACCEPT_ENCODING"],"gzip"))
{
$content = gzencode($content,9);
header("Content-Encoding: gzip");
header("Vary: Accept-Encoding");
header("Content-Length: ".strlen($content));
}
return $content;
}
?>
下面这段是在php文档的ob_start函数里找到的,效果不说了,自己看:
<?php

ob_start('ob_gzhandler');

header('Content-Type: text/css; charset: UTF-8');
header('Cache-Control: must-revalidate');

$expire_offset = 0; // set to a reaonable interval, say 3600 (1 hr)
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $expire_offset) . ' GMT');

function css_compress($buffer) {
  $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);// remove comments
  $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  '), '', $buffer);// remove tabs, spaces, newlines, etc.
  $buffer = str_replace('{ ', '{', $buffer);// remove unnecessary spaces.
  $buffer = str_replace(' }', '}', $buffer);
  $buffer = str_replace('; ', ';', $buffer);
  $buffer = str_replace(', ', ',', $buffer);
  $buffer = str_replace(' {', '{', $buffer);
  $buffer = str_replace('} ', '}', $buffer);
  $buffer = str_replace(': ', ':', $buffer);
  $buffer = str_replace(' ,', ',', $buffer);
  $buffer = str_replace(' ;', ';', $buffer);
  return $buffer;
}

function dump_css_cache($filename) {
  $cwd = getcwd() . DIRECTORY_SEPARATOR;

  $stat = stat($filename);
  $current_cache = $cwd . '.' . $filename . '.' . $stat['size'] . '-' . $stat['mtime'] . '.cache';

  // the cache exists - just dump it
  if (is_file($current_cache)) {
   include($current_cache);
   return;
  }

  // remove any old, lingering caches for this file
  if ($dead_files = glob($cwd . '.' . $filename . '.*.cache', GLOB_NOESCAPE))
   foreach ($dead_files as $dead_file)
     unlink($dead_file);
  
  if (!function_exists('file_put_contents')) {
   function file_put_contents($filename, $contents) {
     $handle = fopen($filename, 'w');
     fwrite($handle, $contents);
     fclose($handle);
   }
  }
  
  $cache_contents = css_compress(file_get_contents($filename));
  file_put_contents($current_cache, $cache_contents);
  
  echo $cache_contents;
}

dump_css_cache('_general.css');

?>

3条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论,或者点这里禁止自动加载

    想说点什么呢?