HTTP压缩

发表于
字数统计: 1.1k | 阅读时长 ≈ 4

什么是HTTP压缩

HTTP压缩是指: Web服务器和浏览器之间压缩传输”文本内容“的方法。 HTTP采用通用的压缩算法，比如gzip来压缩HTML,Javascript, CSS文件。 能大大减少网络传输的数据量，提高了用户显示网页的速度。当然，同时会增加一点点服务器的开销。 本文从HTTP协议的角度，来理解HTTP压缩这个概念。

HTTP内容编码和HTTP压缩的区别

HTTP压缩，在HTTP协议中，其实是内容编码的一种。

在http协议中，可以对内容（也就是body部分）进行编码， 可以采用Gzip这样的编码。 从而达到压缩的目的。 也可以使用其他的编码把内容搅乱或加密，以此来防止未授权的第三方看到文档的内容。所以我们说HTTP压缩，其实就是HTTP内容编码的一种。 所以大家不要把HTTP压缩和HTTP内容编码两个概念混淆了。

内容编码类型

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

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

Content-Encoding值

　　gzip　　表明实体采用GNU zip编码

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

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

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

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

Gzip的缺点

jpeg这类文件用gzip压缩的不够好。

对HTTP传输内容进行压缩是改良前端响应性能的可用方法之一，大型网站都在用。但是也有缺点，就是压缩过程占用cpu的资源，客户端浏览器解析也占据了一部分时间。但是随着硬件性能不断的提高，这些问题正在不断的弱化。

Gzip压缩原理

简单来说， Gzip压缩是在一个文本文件中找出类似的字符串， 并临时替换他们，使整个文件变小。这种形式的压缩对Web来说非常适合， 因为HTML、CSS、js文件通常包含大量的重复的字符串，例如空格，标签。

http协议如何支持压缩文件的传输

1、浏览器请求数据时，通过Accept-Encoding（Request Header）说明自己可以接受的压缩方法

2、服务端接收到请求后，选取Accept-Encoding中的一种对响应数据进行压缩

3、服务端返回响应数据时，在Content-Encoding（Response Header）字段中说明数据的压缩方式

4、浏览器接收到响应数据后根据Content-Encoding对结果进行解压

注：如果服务器没有对响应数据进行压缩，则不返回Content-Encoding，浏览器也不进行解压

什么时候压缩

构建时压缩（webpack）

webpack的compression-webpack-plugin插件用于支持构建项目时压缩文件，Vue项目为例，具体配置如下：

1、首先安装插件，命令：npm install –save-dev compression-webpack-plugin

2、在config/index.js文件中打开Gzip开关，配置需要压缩的文件扩展名

1
2
productionGzip: true,
productionGzipExtensions: ['js', 'css'],

3、webpack.prod.conf.js中设置具体压缩配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' + 
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8,
    })
  )
}

4、打包后会同时保留原文件和压缩后的文件，存储等条件允许的情况下，原文件也建议发布到服务器以支持不兼容gzip的浏览器

5、服务端nginx启动gzip_static

gzip_static是nginx对于静态文件的处理模块，该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容。

为了要兼容不支持gzip的浏览器，启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的情况下，将会大大增加磁盘空间。我们可以利用nginx的反向代理功能实现只保留gz文件。

-------------要说再见啦感谢大佬的光临~-------------