Web前端性能优化教程04：压缩组件

本文是Web前端性能优化系列文章中的第四篇，主要讲述内容：压缩组件。完整教程可查看：Web前端性能优化

基础知识

gzip编码：gzip是GUNzip的缩写，是使用无损压缩算法的一种，最早是用于Unix系统的文件压缩，凭借着良好的压缩效率，现在已经成为Web上使用最为普遍的数据压缩格式。

压缩是如何工作的

客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法，如果客户端请求报文没有包含Accept-Encoding首部，服务器就会假设客户端能够接受任何编码格式；服务器响应报文中包含Content-Encoding表示采用的压缩方法。（然而，一个统计表明，大约有15%的客户端请求是没有Accept-Encoding请求的，因为客户端的一些web代理和PC安全软件会移除浏览器发出的Accept-Encoding，因为监听未经压缩的响应会占用更少的CPU资源，但却无疑增加了网络传输的时间。）

应该对什么资源使用压缩

基于文本的资源如html，js，css，xml都适用于压缩。然而对于图片而言，却不应该对图片进行压缩，因为图片本身是已经被压缩过了，如果再进行gzip压缩，有可能得到的结果是和图片本身大小相差不大或更大，这样就浪费了服务器的CPU资源来做无用功了。

压缩的优缺点

优点：压缩组件可以减少Http响应时间，提升传输效率。

缺点：服务器要通过花费额外的CPU周期来完成压缩，客户端要对压缩文件进行解压缩。

总体来说，使用压缩还是利大于弊的，不过需要合理地使用压缩，通过选择对一定范围大小的组件进行压缩和选择要压缩组件的类型，能使得收益最大化。

考虑代理缓存的情况

 

代理缓存服务器是一个中间层，位于客户端和服务器之间。使用代理缓存的情况下，浏览器将不直接与服务器通信，而是通过代理发送请求。这种情况下，压缩就要考虑额外的东西了。

首先，假设到达代理的是一个来自不支持gzip的浏览器的请求，代理会将请求转发到web服务器，此时web服务器的响应是未经过压缩的，这个响应会把代理服务器缓存起来并发给浏览器。现在，假设到达代理的第二个请求来自一个支持gzip浏览器，请求的是与之前相同的URL，代理会直接使用未经压缩的缓存响应，那么久失去了进行压缩的机会了。考虑更糟糕的情况，第一个请求来自支持gzip的浏览器，第二个请求来自不支持gzip的浏览器，这样第二个请求得到的缓存响应将无法被解码，导致出错。

解决这一问题的方法就是在Web服务器的响应中添加Vary头，Vary:Accept-Encoding，表示web服务器告诉缓存服务器分别为每一个Accpet-Encoding请求头缓存。在前面的例子中，代理通过识别Vary头，对响应缓存不同的版本，避免出错。