HTTP传输内容的压缩

最近在看尤大的ssr项目的demo，看他的项目里有用到compression，完全看不懂这是什么鬼，然后百度了一下，文档也都是英文的，看着有点吃力，隐约的觉得这是压缩http请求的，做前端的都知道，在web开发中，为了使网页加载更流畅，用户体验更好，我们都会在上线前把js，css，image，font，html等等进行压缩，使文件更小，减少带宽，节约流量，但是http压缩是什么？百度一下……然后做下笔记：

【笔记参考】：

https://www.jianshu.com/p/74c10af7707d

https://www.cnblogs.com/z-sm/p/5478495.html

在HTTP1.1开始，Web客户端可以通过Accept-Encoding头来标识对压缩的支持。浏览器发送一个请求（Request）给服务器，并用Accept-Encoding来标识支持的压缩格式（如gzip，deflate等等），服务器会将资源进行压缩，并返回给浏览器，浏览器按照相应的方式进行解析。

按照原文给的例子（原文是天猫的例子），我把我们项目进行了查看，如下图：

 

在HTTP请求中，我的浏览器支持压缩格式为gzip和deflate，服务器采取的gzip压缩（实际上，大多数网站都是用的gzip压缩，参考Yahoo！工程师的说法，支持gzip的浏览器范围最广，使用gzip的压缩效果最佳）

 

我把app.js（上面请求的js）下载下来发现，源文件大概26k多，结果传输的文件即压缩后的文件，只有7.4k，压缩了30%多，大大优化了前端性能。

以下是基本的文字描述：

一、HTTP压缩

在http协议中，可以对内容（也就是body部分）进行编码，可以采用gzip这样的编码。从而达到压缩的目的。也可以使用其他的编码把内容搅乱或加密，以此来防止未授权的第三方看到文档的内容。HTTP压缩，是HTTP内容编码的一种。

http压缩是指:web服务器和浏览器之间压缩传输的“文本内容”的方法。htpp采用通用的压缩算法，比如gzip来压缩html，javascript，css文件。能大大减少网络传输的数据量，提高了显示网页的速度。当然，同时会增加一点点服务器的开销。

二、HTTP压缩过程

1、浏览器发送Http request 给Web服务器，request中有Accept-Encoding：gzip，deflate（告诉服务器，浏览器支持gzip压缩）

2、Web服务器接收到request请求后，生成原始的Response，其中有原始的Content-Type和Content-Length

3、Web服务器通过Gzip，来对Response进行编码，编码后header中有Content-Type和Content-Length（压缩后的大小），并且增加了Content-Encoding：gzip，然后把Response发送给浏览器。

4、浏览器接到Response后，根据Content-Encoding：gzip来对Response进行解码。获取到原始response后，然后显示出网页。

内容编码类型

HTTP定义了一些标准的内容编码类型，并允许用扩展的形式添加更多的编码。

Content-Encoding header就用这些标准化的代号来说明编码时使用的算法

Content-Encoding值：

gzip 表明实体采用GNUzip编码

compress 表明实体采用Unix的文件压缩程序

deflate 表明实体是用zlib的格式压缩的

identity 表明没有对实体进行编码。当没有Content-Encoding header时，就默认为这种情况

gzip, compress, 以及deflate编码都是无损压缩算法，用于减少传输报文的大小，不会导致信息损失。 其中gzip通常效率最高， 使用最为广泛。

http压缩对纯文本可以压缩至内容的40%，从而节省了60%的数据传输，Gzip对JPEG这类文件压缩的不够好

HTTP压缩示例，以上两个原文中都有写，后端的代码，由于本人目前是前端，还无法来操作，但是给出一种纯前端的解决方案就是，我们的项目目前打包的静态文档都是放到oss上，在oss上开启gzip压缩，即可。

以上对HTTP压缩有个初步了解，后面在逐渐后端话后做深入了解，请大家多多指教！