详解HTTP压缩

为什么要使用压缩？

怎么在体积变大的同时，继续保持或提高网页加载速度呢？答案之一是“压缩”，http压缩的效果非常明显。

据统计，web应用的体积的平均水平，在2016年是2.5MB，到2017年时上升到3.4MB，而2012年的时候这个值仅仅是1.1MB。可见，web应用的体积在不断增大。

我们用知乎首页作为例子，看看对js文件的压缩效果，这个页面的压缩方式包括了gzip和br压缩。

打开chrome devtools>network，看到size一栏。通过计算，得出压缩前的js总体积为：3623.1kb，压缩后为1,181.3kb，减少了67.4%的体积。所以，压缩绝对是提高加载速度很重要的一个点，也应该引起足够的重视。

如何压缩http资源？

http压缩通常是通过在reponse header指定Content-Encoding首部，告诉客户端response的压缩格式，这样客户端才能正确解压。

压缩的种类有哪几种？

Content-Encoding的值可以是下面这些：

// 常见的都是单个值
Content-Encoding: gzip   // 最常用
Content-Encoding: compress // 基本被废弃
Content-Encoding: deflate  
Content-Encoding: identity // 表示未经过压缩和修改
Content-Encoding: br  // brotli
​
// Multiple, in the order in which they were applied
Content-Encoding: gzip, identity
Content-Encoding: deflate, gzip

最常用的压缩格式是gzip，因为它有不错的压缩率和优秀的兼容性。br是近几年渐渐流行的一种压缩格式，全称叫"brotli"，是由Google推出的一种压缩率很高的压缩格式。但因为较新，所以浏览器兼容性并不是很好，支持的浏览器列表如下：

Google Chrome: Chrome 49+ 
Mozilla Firefox: Firefox 44+ 
Opera: Opera 36+

如今，国外国内很多大厂都在慢慢提高对brotli的使用率，它会是将来的主流。

哪些资源可以被压缩？

一般建议对数据尽可能地进行压缩，不过对于特定类型的文件来说，比如jpeg图片文件，已经是进行过压缩的了。有时候再次进行额外的压缩无助于负载体积的减小，反而有可能会使其增大。

值得一提的是，除了静态资源，ajax接口也可以被用来压缩的（文本压缩）。