由上图我们可以看到Yahoo的首页在YSLOW中的评分情况。今天我针对其中“Compress components with gzip”怎么个实现法,做下小介绍吧。其实我个人认为这条不是页面重构师所要做的事,但也作为前端开发的一小支流,页面重构也需要了解,在页面重构时注意别让自己的页面臃肿。相当一部分程序员可能由始至终都没有考虑这个问题,他们更多的精力花在追求技术,包括最早期的我。
现在大家开始越来越关注用户体验这块,怎样留住网站用户。丰富炫丽的网页,相对应其文件大小也随着涨,水涨船高嘛!想办法让其瘦身吧!
Gzip是目前最流行也是最有效的压缩方式。Gzip大概可以减少70%的响应规模。目前大约有90%通过浏览器传输的互联网交换支持gzip格式。如果你使用的是Apache,gzip模块配置和你的版本有关:Apache 1.3使用mod_zip,而Apache 2.x使用moflate。
服务器根据文件类型来选择需要进行gzip压缩的文件,大多数web服务器会压缩HTML文档。对脚本和样式表进行压缩同样也是值得做的事情,但是很多web服务器都没有这个功能。实际上,压缩任何一个文本类型的响应,包括XML和JSON,都值得的。图像和PDF文件由于已经压缩过了所以不能再进行gzip压缩。如果试图gizp压缩这些文件的话不但会浪费CPU资源还会增加文件的大小。
废话不多说了,我的服务器是win系统,所以我先介绍IIS6服务器下的压缩方法。IIS6 本身支持 gzip 压缩,IIS5 就比较费劲了。你可以去http://www.port80software.com/products/httpzip/?vid=3354166下载,不过得交money就是了。:)不过现在的服务器应该都升级到IIS6了吧!自己小祈祷下吧!
纯 Tomcat 服务器
如果您的 WEB 应用程序是跑在 Tomcat 服务器下的,而且直接使用 Tomcat 所提供的 HTTP 服务,那实在是太简单了,只需要在 server.xml 配置文件中给 HTTP Connector 增加一个 compression 的参数值为 on 并重启 Tomcat 服务器就立刻生效,配置如下:
<Connector port="8080" protocol="HTTP/1.1"
maxThreads="150" connectionTimeout="20000"
redirectPort="8443" compression="on"/>
Tomcat 采用的是 HTTP/1.1 的 GZIP 压缩协议,它会根据浏览器送过来的请求中的 accept-encoding 值是否包含 gzip 来判断浏览器是否支持 gzip 压缩协议,如果浏览器支持就启用 gzip 压缩,否则就不进行任何压缩处理。Tomcat 中还有另外一个参数 compressableMimeType,这个参数可以用来指定压缩哪种类型的内容,例如可以指定该配置值为:text/html,text/plain ,则只压缩 contentType 为 text/html 和 text/plain 的页面,不过您最好也将 css 和 javascript 文件也算在压缩的文件类型中,因为这两者的压缩效果也十分的明显。
Apache 服务器
在 apache 1.3 版本,大家常用 mod_gzip 对输出内容进行压缩,现在主流的浏览器都支持 gzip 解压缩。在 apache2 下,这个模块换名为 mod_deflate,对应的模块文件名是 mod_deflate.so。mod_gzip 本文不做介绍,下面描述一下在 Apache 2 下如何启用并配置 mod_deflate 模块。默认安装的 Apache 不管是 Windows 还是 Linux/Unix,都是不启用该模块的, Linux/Unix 下甚至不带该模块,你需要手工编译这个模块。
下面我们分别介绍在 Windows 和 Linux 操作系统下如何启用并配置 mod_deflate 模块。
在 Windows 下采用安装程序安装的 Apache 服务器已经带有 deflate 所需要的模块 mod_deflate.so 和 mod_headers.so,我们只需要在 httpd.conf 配置文件中启用并进行相关的配置即可,配置如下:
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
<Location />
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>
而如果是 Linux/Unix 操作系统,如果你没有在编译安装的过程中将所需要的两个模块 mod_deflate 和 mod_headers 编译进去的话,那就稍微有点麻烦,首先我们先看如何在编译安装 Apache 过程中也同时编译这两个模块,请在执行 configure 程序时增加两个参数分别是:
# ./configure --enable-deflate --enable-headers
这样在编译完 Apache 后就可以直接在 httpd.conf 中启用并配置 deflate 模块了,配置的方法跟 Windows 平台下是相同的。
如果说您的 Apache 已经在运行了,不想再重新编译一次,那也可以选择只编译 deflate 模块所需的文件 mod_deflate.c 和 mod_headers.c。这两个文件位于 {apache-src}/modules/filters/ 目录下(其中 {apache-src} 为 apache 源文件所在的目录)。使用如下命令来单独编译这两个源文件。
# {apache-bin}/apxs -i -a -c {apache-src}/modules/filters/mod_deflate.c
# {apache-bin}/apxs –i –a –c {apache-src}/modules/filters/mod_headers.c
其中 {apache-bin} 为 Apache 安装目录下的 bin 目录,接下来在 httpd.conf 直接配置该模块即可。
很多时候你在单独编译 deflate 模块的时候可能会碰到编译错误,提示是:
Cannot load /opt/apache/modules/mod_deflate.so into server: /opt/apache/modules/mod_deflate.so: undefined symbol: deflate
解决的方法如下:
编辑 /usr/local/apache2/bin/apr-config 文件修改其中的 LDFLAGS 值为 “-lz”,然后再重新编译 mod_deflate 模块,apxs -ica mod_deflate.c 即可。
为了省却不必要的麻烦,请尽量在编译安装时直接加上 –enable-deflate –enable-headers 参数。