前端性能优化基础篇之gzip

前端性能优化的技术很多,但其中最简单也是效率最高的莫过于gzip(GNU zip)压缩.
这是目前在web上使用最普遍的数据压缩格式, 用于压缩使用internet传输的所有文本类资源, 如HTML, CSS, Javascript. 之所以简单是因为它只需要做些server配置便可达成. 而至于效率, 它可将大部分文本资源的传输尺寸减小60%以上, 这是其他任何优化技术所无法比拟的.

使用Tomcat配置gzip
Tomcat从5.0之后开始支持gzip压缩. 使用Tomcat配置gzip非常简单, 以tomcat6.0为例, 打开 $tomcat_home$/conf/server.xml, 查找protocol="HTTP/1.1", 为该节点额外加上以下粗体标注的属性即可:

<Connector port="80" protocol="HTTP/1.1" 
   ...
   compression="on" compressionMinSize="2048" noCompressionUserAgents="MSIE [1-6]\." compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain"/>

compression="on" -- 打开压缩功能
compressionMinSize="2048" -- 使用压缩的最小尺寸,单位为Byte, 这里设置为2KB. 之所以要有此设置, 是因为压缩本身也会有一定的性能开销, 包括服务器端需要花费额外的CPU周期来完成压缩, 客户端要对压缩文件进行解压, 如果原始文件过小, 则这种性能损耗往往大于压缩效率, 甚至压缩过的文件尺寸还要大于源文件, 适得其反. 根据经验, 应只对大于2KB的文件进行压缩. 但从另一方面来说, 我们也应尽量避免在网络传输中出现过小的文件. 这在后续章节中会有介绍.
noCompressionUserAgents="MSIE [1-6]\." -- 对指定浏览器不使用压缩, 这里对 IE6 及以下版本忽略压缩. 因其不支持gzip, 且如果在其上使用gzip压缩会造成脚本无法正确执行等问题.
compressableMimeType="text/html,text/xml,text/javascript,text/css,text/plain" -- 对指定类型的文件使用压缩, 这里给出了大部分web涉及的文本文件格式. 注意 gzip 为文本数据压缩格式, 切勿尝试对图片,多媒体等非文本格式使用gzip压缩.

验证
本地配置好并启动tomcat. 打开chrome, Ctrl+Shift+i 打开 chrome developer, 切换到 Network 标签下. 地址栏键入 localhost, 打开tomcat默认首页, 可以观察到 localhost 请求的content是7.6KB, 但传输size只有3.0KB

 

点击该请求,打开明细页, 可见其请求头内包含"Accept-Encoding:gzip,deflate,sdch", 表明当前请求支持的压缩格式; 响应头内包含"Content-Encoding:gzip"表明响应内容已按gzip压缩. 值得注意的是响应头中还包含了"Transfer-Encoding:chunked"表明输出的内容长度不能确定, 既内容可能被分段传输. 对于gzip, 在压缩完成前并不能预期源文件压缩后的尺寸是多少, 如果要整体压缩完再传输,则势必先分配一个很大的字节数组来存储可能的压缩结果, 这样既费时间又费空间. 而结合"Transfer-Encoding:chunked"使用, 则可以边压边传, 从而进一步保证了传输的效率.

转载于:https://www.cnblogs.com/sailorT/archive/2013/03/12/gzip.html