gzip是GNUzip的缩写,最早用于UNIX系统的文件压缩.HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip.目前主流的浏览器,Chrome,firefox,IE等都支持该协议.常见的服务器如Apache,Nginx,IIS同样支持gzip.

 

gzip压缩比率在3到10倍左右,可以大大节省服务器的网络带宽.而在实际应用中,并不是对所有文件进行压缩,通常只是压缩静态文件.

 

那么客户端和服务器之间是如何通信来支持gzip的呢?通过图1我们可以很清晰的了解.

 

图1 gzip工作原理图

 

1)浏览器请求url,并在request header中设置属性accept-encoding:gzip.表明浏览器支持gzip.

 

2)服务器收到浏览器发送的请求之后,判断浏览器是否支持gzip,如果支持gzip,则向浏览器传送压缩过的内容,不支持则向浏览器发送未经压缩的内容.一般情况下,浏览器和服务器都支持gzip,response headers返回包含content-encoding:gzip.

 

3)浏览器接收到服务器的响应之后判断内容是否被压缩,如果被压缩则解压缩显示页面内容.

 

下面以淘宝为例,验证一下开启gzip的效果.客户端(浏览器)请求http://www.taobao.com/.本次测试使用的浏览器为Chrome,打开控制台查看网络信息可以看到request headers中包含:accept-encoding:gzip, deflate, sdch,表明chrome浏览器支持这三种压缩.这里值得一提的是accept-encoding中添加的另外两个压缩方式deflate和sdch.deflate与gzip使用的压缩算法几乎相同,这里不再赘叙.sdch是Shared Dictionary Compression over HTTP的缩写,即通过字典压缩算法对各个页面中相同的内容进行压缩,减少相同的内容的传输.sdch是Google推出的,目前只在Google Chrome, Chromium 和Android中支持.图2为浏览器发送的request header.图3为服务器返回的response header.

 

图2 淘宝request header

 

图3 淘宝response header

 

通过图2以图3很明显可以看出网站支持gzip,那么当支持gzip之后,压缩效率如何体现呢?通常浏览器都有现成的插件检测gzip压缩效率,如firefoxd的YSlow插件,我这里使用了网站http://gzip.zzbaike.com/做了检测.检测结果如图4所示:

 

图4 淘宝gzip检测结果

 

很明显可以看出,通过使用gzip,静态文件被压缩了80.5%,极大的节省了服务器的网络带宽,这对于访问量巨大的淘宝来讲节约的流量非常可观.

 

在企业级应用中,通常被使用到的服务器有nginx,Apache等.nginx是一个高性能的HTTP和反向代理服务器,本文接下来的内容会介绍一下在Nginx中如何开启gzip.

 

Nginx中开启gzip:

 

详细介绍一下如何在nginx.conf中配置gzip.此次我配置的gzip参数如图5所示:

 

图5 gzip参数

 

添加完参数后,运行nginx –t检查一下语法,若语法检测通过,则开始访问url检测gzip是否添加成功.以下为我所使用的gzip配置的作用.

 

1) gzip on:开启gzip.

 

2) gzip_comp_level:gzip压缩比.

 

3) gzip_min_length:允许被压缩的页面最小字节数.

 

4) gzip_types:匹配MIME类型进行压缩,text/html默认被压缩.

 

检测gzip是否开启

 

如果没有现成的项目代码,这里提供一个比较简单的检测方式.首先在本地安装nginx,在nginx默认目录下面添加了两个静态文件bootstrap.css、bootstrap.js.

 

OS X系统的默认路径为:/usr/local/Cellar/nginx/1.10.2_1/html,Windows系统直接复制文件到文件夹下面.

 

拷贝文件指令可参考:cp -r bootstrap.js /usr/local/Cellar/nginx/1.10.2_1/html,在nginx的默认成功跳转页面index.html引入这两个静态文件.index.html页面内容如图6所示.

 

图6 index.html

 

做好这一切的准备工作之后,浏览器输入http://localhost:8080/.出现如图7所示页面表明nginx启动成功.

 

图7 nginx启动成功界面

 

此时打开Chrome控制台,可以看到network信息,response headers中返回了content-encoding:gzip,表明gzip开启成功.gzip未开启前network信息如图8所示,开启后返回network信息如图9所示,url请求的headers报文如图10所示.

 

图8 gzip开启前控制台信息

 

图9 gzip开启成功后控制台信息

 

图10 gzip开启成功后headers报文

 

对比以上三图可以看出gzip压缩效率非常高,且经过压缩后静态文件大小不到原来的五分之一.这里值得一提的是gzip的压缩率,并不是经过gzip压缩之后,所有文件都会变小.根据gzip使用的算法特性,代码相似率越大压缩效率越高.所以对于静态资源量非常大的网站,开启gzip可节省大量流量,而同时gzip的应用远不止提高web性能,Android,IOS底层网络请求同样可用.