前端性能-gzip压缩

压缩通过减少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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,529评论 5 475
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,015评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,409评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,385评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,387评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,466评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,880评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,528评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,727评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,302评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,873评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2 342

推荐阅读更多精彩内容

  • API定义规范 本规范设计基于如下使用场景: 请求频率不是非常高:如果产品的使用周期内请求频率非常高,建议使用双通...
    有涯逐无涯阅读 2,517评论 0 6
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,579评论 18 139
  • 一、概念(载录于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434阅读 8,326评论 6 152
  • Http协议详解 标签(空格分隔): Linux 声明:本片文章非原创,内容来源于博客园作者MIN飞翔的HTTP协...
    Sivin阅读 5,201评论 3 82
  • 一本好书,在读它之前是有预感的。 生命是什么?福冈伸一给出的答案是: 生命是一组系统在时间里流动的过程。生物体在这...
    李心牧阅读 1,284评论 0 0