美文网首页
前端性能-gzip压缩

前端性能-gzip压缩

作者: Addy_Zhou | 来源:发表于2017-03-27 23:54 被阅读945次

压缩通过减少http响应的大小来减少响应时间。如果Http请求得到更小的响应,服务器和浏览器之间就会有更少的包被传送,传输时间就减少了。

压缩是怎么工作的

从Http/1.1开始,浏览器通过在http请求头中添加Accept-Encoding头来支持压缩;

Accept-Encoding: gzip,deflate

如果web服务器从请求头中发现Accept-Encoding头,它可能使用Accept-Encoding指定的压缩算法列表中的一个来压缩响应。web服务器通过响应头中的Content-Encoding头来通知浏览器响应内容使用了哪种压缩算法;

Content-Encoding:gzip

Gzip是目前最流行而且很有效率的压缩方法。另外一种压缩算法是deflate,但是它稍微低效点并且不是很流行,支持deflate的浏览器也支持gzip,但是有些支持gzip的浏览器不支持deflate,所以gzip更适合作为压缩响应的方法。

哪些需要被压缩

很多网站压缩他们的HTML文档,但是压缩你的scripts脚本和stylesheet样式文件是值得的(事实上压缩任何text类型的响应,包括XML和JSON都是是值得的),图片和PDF文件不应该被压缩,因为他们已经是压缩的了,试着压缩他们会浪费CPU资源而且可能潜在增加文件大小。

压缩有一项成本:它会带来额外的服务器端压缩和客户端解压缩的CPU资源。为了权衡利弊,你需要去考虑响应的大小,网络的带宽,以及服务器和浏览器之间的网络距离等因素,这些信息通常是不容易获取的。所以,一般对于超过1k或者2k的文件都是值得去压缩的。

压缩率

压缩通常能减少响应70%左右的大小

代理缓存

当浏览器发送经过代理的请求,情况相对会变得复杂。假设来自不支持gzip的浏览器发起第一次请求到代理服务器,因为是第一次请求,所以代理服务器的缓存是空的,代理把请求转发给web服务器,web服务器作一个未压缩的响应。这个未压缩的响应被代理缓存并且发送给浏览器。现在,假第二个支持gzip压缩的请求发送到代理,代理从缓存中取出未压缩的数据作为响应,这样就丢失了使用gzip的能力。

更糟糕的是,如果第一次请求来自支持gzip的浏览器而第二次请求来自一个不支持的浏览器,这种情况下,代理缓存中有一个内容的压缩版本并且为不管是否支持gzip压缩的浏览器都提供服务。

解决这个问题的方法是在你的web服务响应头中添加一个Vary header字段,web服务器通知代理基于一个或多个请求头来做不同的缓存响应。因为是否压缩是基于Accept-Encoding头,所有有理由在web服务器的响应的vary头字段中包含Accept-Encoding

Vary: Accept-Encoding

这会导致代理会基于请求头Accept-Encoding字段的每个一个值缓存不同的响应内容版本。在我们之前的例子中,代理将缓存两个每个响应的两个版本:当Accept-Encoding是gzip时的压缩内容,和Accept-Encoding完全没有指定时的非压缩版本。当浏览器发起一个带Accept-Encoding:gzip的请求到代理,代理会取缓存中压缩的版本并作为响应到浏览器,如果没有Accept-Encoding:gzip头,浏览器将受到未压缩的版本。

代理边缘情况

虽然有90%的浏览器声称支持gzip,但是可能其中有些浏览器在解压方面存在bug。一个比较安全的方法是向被证实支持压缩的浏览器才提供压缩内容的服务,比如IE6+和Mozilla 5.0+

web服务器可以通过配置User-Agent的类型条件来对指定压缩安全的浏览器提供压缩支持,比如Apache 1.3设置如下

mod_gzip_item_include reqheader "User-Agent: MSIE [6-9]"
mod_gzip_item_include reqheader "User-Agent: Mozilla/[5-9]"

添加缓存混合这些浏览器的边缘情况,最好的方法是添加User-Agent到Vary头中

Vary: Accept-Encoding,User-Agent

这样代理就会根据请求的Accept-Encoding和User-Agent的值来缓存不同的web服务器响应版本,便于下次请求直接作出响应。但是代理基于Accept-Encoding和User-Agent请求头的组合缓存所有请求URL的响应内容,是不太可能的。

这个问题实质上是平衡压缩和缓存两者的问题,怎么处理还是得依据网站的实际情况:

  • 如果你的网站有比较少的用户并且他们是比较小众的(比如都使用firefox1.5),边缘情况就可以几乎不考虑,压缩你的内容并且使用Vary:Accept-Encoding,这样就通过减少响应大小并且使用代理缓存来增强了网站的性能。
  • 如果你更关心节省网络带宽,同样压缩你的内容和使用Vary:Accept-Encoding。这样减少了web服务器的网络带宽并且增加了被代理处理的请求数量
  • 如果你有一个大的不同的用户,能够负担得起比较高的带宽开销和一个高质量的口碑,压缩你的内容和使用Cache-Control:Private。这个会使代理不再缓存,但是避免了边缘情况的bug

相关文章

  • 前端性能-gzip压缩

    压缩通过减少http响应的大小来减少响应时间。如果Http请求得到更小的响应,服务器和浏览器之间就会有更少的包被传...

  • HTTP传输中gzip压缩

    前端打包压缩的有grunt,gulp,webpack,而gzip压缩是指服务端对资源进行压缩。gzip是GNUzi...

  • java压缩字符串,前端接收pako解压

    使用springboot开发 1.后端java代码压缩: ``` /** * 测试GZIP压缩之后返回给前端,前端...

  • vue性能优化详解(三)

    前端路漫漫,优化无极限。本文主要从Web 技术方向讲述vue性能优化。 1.开启 gzip 压缩 即GNUzip,...

  • 前端性能优化 – 资源预加载

    当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载...

  • [性能优化]HTTP篇

    参考文章:Vue 项目性能优化 — 实践指南(网上最全 / 详细) 开启 gzip 压缩 gzip 是 GNUzi...

  • Vue性能优化

    1、gzip压缩(效果明显) 在所有的web前端项目,静态资源基本都放在cdn上,gzip的压缩是非常必要的,它直...

  • nginx 启用 gzip压缩

    做为如今性能最好,使用最广泛的web服务器nginx来说。本身将具有gzip压缩的功能 什么是GZIP GZIP是...

  • C# SharpZipLib解压缩/压缩Gzip数据

    Gzip压缩: Gzip解压缩:

  • linux/unix之压缩文件

    gzip压缩数据 单个压缩 gzip test.log 批量压缩 gzip test* 归档数据 tar命令 压缩...

网友评论

      本文标题:前端性能-gzip压缩

      本文链接:https://www.haomeiwen.com/subject/pmvanttx.html