YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Compress components with gzip

前端性能优化:Compress components with gzip

Compress components with gzip(用GZip压缩组件),GZip压缩组件相关的信息并不多,所以这次介绍GZip的优化规则就根据Steve Souder的《High Performance Web Sites》的相关章节来介绍。好了,不绕弯子,直接进入主题吧。

GZip 简介

(摘选至维基百科 Gzip

GZip是若干种文件压缩程序的简称,通常指GNU计划的实现,此处的gzip代表GNU zip。也经常用来表示gzip这种文件格式。软件的作者是Jean-loup Gailly和Mark Adler。在1992年10月31日第一次公开发布,版本号0.1。

HTTP/1.1协议允许客户端选择要求从服务器下载压缩内容,这个标准本身定义了三种压缩方法:“gzip”(内容用gzip数据流进行封装)、“compress”(内容用compress数据流进行封装)以及“deflate”(内容是原始格式、没有数据头的DEFLATE数据流)[3]。许多HTTP客户端库、服务器平台和绝大多数现代浏览器都支持前后两种格式。

为什么是GZip

为什么用GZip压缩,而不用其他的压缩算法?因为 GZip 是目前最流行和最有效的压缩方法(前面介绍的从HTTP 1.1开始主流的浏览器都支持GZip了),并且是GUN协议的免费软件,没有任何专利和其他使用限制的问题。你可能见到过另一种压缩格式是 deflate,但是压缩效果没有GZip好,而很多支持GZip的浏览器并不支持deflate,所以gzip目前是最理想的压缩方法。

GZip压缩是如何工作的

从HTTP 1.1开始,浏览器就可以通过 Accept-Encoding 头来标识对压缩的支持。GZip压缩过的文件,我们可以看到这样的头信息:

浏览器中请求头性息(Accept-Encoding头)截图

浏览器中请求头性息(Accept-Encoding头)截图

Accept-Encoding: gzip, deflate

如果Web服务器看到请求中的这个头,就会使用客户端列出的方法中的一种压缩相应。Web服务器通过相应中的 Content-Encoding 头来通知Web客户端。

浏览器中(服务器)相应头性息( Content-Encoding头)截图

浏览器中(服务器)相应头性息( Content-Encoding头)截图

Content-Encoding: gzip

这里要说明一下,当服务器设置了Expires头时,Content-Encoding头是在来自缓存的响应头信息中的(查看浏览器中请求头性息(Accept-Encoding头)截图)。这是浏览器是通过缓存的Content-Encoding头信息来解压文件的。

GZip 压缩什么

压缩什么文件

HTML文档、JS文件、CSS样式表、XML、RSS、JSON都应该压缩。根据Steve Souder的研究:

PDF和图片文件不应该压缩。 因为这些文件已经被压缩过了。试图对它们进行压缩只会浪费CPU资源,还有可能会增加文件大小。

我实际的开发经验是GZip压缩图片确实差异比较大,有的图片可以压缩不少体积,有的图片则没有压缩太多,也有体积反而变大的情况(CPU的消耗没有实际测试。如果有朋友研究过CUP相关的数据,请告诉我们)。所以,不用使用GZip压缩图片,而是应该在上传图片到服务器前使用专门的图片压缩工具,压缩好图片后再上传到服务器。

应该压缩多大的文件

根据经验通常对大于1KB或者2KB的文件就应该经行压缩。mod_gzip_minimum_file_size指令控制着希望压缩的文件最小值,默认值是500B。

GZip 压缩是要消耗服务器CPU资源的,这会对服务器的响应时间有影响的。所以,也会出现压缩消耗的资源对性能的影响超过压缩本身所能提升的性能的情况。就像前面提到的 GZip压缩图片。压缩文件的数据量也是有讲究的,就像上面Steve提到的,GZip应该压缩大于1KB的文件

在Nginx服务器端配置GZip压缩

Steve 在他的书中介绍了Apache的一些配置(Apache 2.0配置方法),我这几就介绍一下 Nginx服务器端的配置,我直接给出配置代码:

# 代码添加到 nginx 的安装目录下的 nginx.conf文件中,并且添加在http区块中
http{	
    gzip on;
	# HTTP 1.1 版本
	gzip_http_version 1.1;
	gzip_vary on;
	# 压缩>=1K的文件
    gzip_min_length 1k;
    gzip_comp_level 6;
	# 压缩所有代理的文件
    gzip_proxied any;
	# 压缩的文件类别
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    # make sure gzip does not lose large gzipped js or css files
    # see http://blog.leetsoft.com/2007/7/25/nginx-gzip-ssl
    gzip_buffers 16 8k;

    # Disable gzip for certain browsers.
	# IE6以下的浏览器使用GZip,因为这些浏览器不支持gzip压缩文件
    gzip_disable "MSIE [1-6].(?!.*SV1)";
}

Nginx的配置非常的直接明了,而现在很多的服务器端都是采用的Nginx处理静态文件,然后通过代理处理动态脚本,所以本文就只介绍GZip在Nginx的配置。而关于Steve书中提到的代理缓存的压缩的处理,在我们给出:

gzip_proxied any;

这样的处理后,Nginx已经自动给服务器的相应头中添加了 Vary相应头,在前面的截图中已经给可以看到了:

浏览器中请求头性息(Accept-Encoding头)截图

浏览器中请求头性息(Accept-Encoding头)截图

至于Steve书中另外的边缘情况,即在不支持GZip的低版本IE浏览器解析GZip的问题,我的配置中就是针对IE6以下的浏览器就不做GZip压缩:

# Disable gzip for certain browsers.
	# IE6以下的浏览器使用GZip,因为这些浏览器不支持gzip压缩文件
    gzip_disable "MSIE [1-6].(?!.*SV1)";

GZip 压缩的效果

GZip 压缩通常能将响应的数据量减少将近70%。

GZip压缩单个文件的效果统计表
文件类型 未压缩文件大小 gzip大小 gzip节省大小 节省百分比
JS脚本 173KB 58.4KB 114.7KB 66.3%
CSS样式表 37.1KB 6.7KB 30.4KB 66.3%
HTML文档 189KB 31.5KB 157.5KB 83.3%
JPG图片 59KB 58.8KB 0.3KB 0.5%
JPG图片 115KB 72.5KB 42.5KB 36.9%
JPG图片 52.2KB 52.3KB +0.1KB +0.19%

根据实际测试的结果,GZip 压缩文本格式文件的效果是不错的,而图片则确实出现了压缩后体积变大的情况。所以再次强调,不要用GZip压缩图片

最后我们来看看采用GZip压缩后的整体标签,这里我以我现在工作的网站首页的网络流量图来做示例:

湖北省政府门户网站首页的空缓存网络请求视图

湖北省政府门户网站首页的空缓存未GZip压缩的网络请求视图

湖北省政府门户网站首页的空缓存GZip压缩后的网络请求视图

湖北省政府门户网站首页的空缓存GZip压缩后的网络请求视图

前后流量对比压缩了300KB,这个减少的流量都是来自于文本(JavaScript,CSS,HTML)文件,也就是前面统计表中的数据。如果单谈文本文件的压缩效果,首页流量减少了应该超过70%,这应该算是相当大的提升了。图片中页面完全加载完毕的时间给出了GZip压缩后前端性能提升的非常有力地证明。

不过我们也看到,页面中剩下的未能压缩的就是图片了,图片文件的数据量大约是1.3M。要是能够把图片再压缩一下就好了。不要心急,之后的性能优化我会介绍到图片的压缩处理的。

好了,关于GZip压缩的前端性能优化就说这么多了,关于Apache和IIS如何配置在Steve书中并没有给出很具体的处理方法,我这里也只给出了Nginx的配置,稍后我会填补上相关的具体处理。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Compress components with gzip

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)