html文件压缩成gzip,前端性能优化成神之路-HTTP压缩开启gzip

什么是HTTP压缩css

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

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

HTTP压缩,在HTTP协议中,实际上是内容编码的一种。apache

在http协议中,能够对内容(也就是body部分)进行编码, 能够采用gzip这样的编码。 从而达到压缩的目的。 也能够使用其余的编码把内容搅乱或加密,以此来防止未受权的第三方看到文档的内容。因此咱们说HTTP压缩,其实就是HTTP内容编码的一种。 因此你们不要把HTTP压缩和HTTP内容编码两个概念混淆了。浏览器

HTTP压缩的过程tomcat

浏览器发送Http request 给Web服务器,  request 中有Accept-Encoding: gzip, deflate。 (告诉服务器, 浏览器支持gzip压缩)服务器

Web服务器接到request后, 生成原始的Response, 其中有原始的Content-Type和Content-Length。网络

Web服务器经过Gzip,来对Response进行编码, 编码后header中有Content-Type和Content-Length(压缩后的大小), 而且增长了Content-Encoding:gzip.  而后把Response发送给浏览器。ide

浏览器接到Response后,根据Content-Encoding:gzip来对Response 进行解码。 获取到原始response后, 而后显示出网页。性能

7c6b3d260ae07b4f4e90bb433a966ad4.png

实例:博客园就使用了gzip压缩

63abd5b899da2cdf2c33223fc22b1284.png

内容编码类型

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

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

Content-Encoding值

gzip  代表实体采用GNU zip编码

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

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

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

gzip, compress, 以及deflate编码都是无损压缩算法,用于减小传输报文的大小,不会致使信息损失。 其中gzip一般效率最高, 使用最为普遍。

压缩的好处

http压缩对纯文本能够压缩至原内容的40%, 从而节省了60%的数据传输。

Gzip的缺点

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

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

Gzip是如何压缩的

简单来讲, Gzip压缩是在一个文本文件中找出相似的字符串, 并临时替换他们,使整个文件变小。这种形式的压缩对Web来讲很是适合, 由于HTML和CSS文件一般包含大量的重复的字符串,例如空格,标签。

如何使用gzip进行压缩

怎么样才能使用HTTP的这个属性来压缩呢?这才是本文的重点。其实很简单,客户端不用任何配置,在服务端配置便可,服务器不一样,配置方法也不尽相同。本文以tomcat为例

tomcat的配置

以我电脑tomcat安装目录为例,找到F:\software\apache-tomcat-7.0.54\conf文件夹下的server.xml

f3bfd4a191745f5dd27a0b32c579a645.png

11682133ec031f6027691f1f6fc1a6d6.png

compress="on" 表示开启压缩。

compressionMinSize="2048"表示会对大于2KB的文件进行压缩。通常按照如此配置,可根据本身需求而定。

compressableMimeType是指将进行压缩的文件类型,对js,css,图片的压缩能够大大提高压缩效果。

tomcat的server.xml的配置按照上述进行配置,重启tomcat服务器。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值