《高性能网站建设指南》规则4—压缩组件

2019-10-09 admin

如果HTTP请求产生的响应包很小,传输时间就会减少,因为只需要将很小的包从服务器传递到客户端。

从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来标识对压缩的支持。

Accept-Encoding: gzip, deflate

如果Web服务器看到请求中有这个头,就会使用客户端列出的方法中的一种来压缩响应。Web服务器通过响应中的Content-Encoding头来通知Web客户端。

Content-Encoding: gzip

gzip是目前最流行和最有效的压缩方法。支持deflate的浏览器也支持gzip,但很多浏览器支持gzip却不支持deflate。

压缩什么

压缩的内容包括XML和JSON在内的任何文本响应,但这里只关注脚本和样式表,因为他们用得最普遍。图片和PDF不应该被压缩,因为它们本来就已经被压缩了,会浪费CPU资源,还可能增加文件的大小。

服务器会花费额外的CPU周期来完成压缩,客户端要对压缩文件进行解压缩。要检测收益是否大于开销,需要考虑响应的大小、连接的带宽和客户端与服务器之间的Internet距离。这些信息难以得到且也有其他变数需要考虑。根据经验通常对1KB或者2KB以上的文件进行压缩。mod_gzip_minimum_file_size指令控制着希望压缩的文件的最小值。

节省

gzip是典型的压缩选择。gzip能将响应整体减少66%,而deflate能减少60%。

配置

Apache1.3使用mod_gzip,以下是最常用的指令: 启用mod_gzip mod_gzip_on 基于文件类型、MIME类型、用户代理等定义哪些需要压缩、哪些不需要。 mod_gzip_item_include mod_gzip_item_exclude 例如明确压缩脚本和样式表: mod_gzip_item_include file .js$ mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include file .css$ mod_gzip_item_include mime ^text/css$

gzip命令行工具提供了一个选项,用于控制压缩的程度,可以在CPU使用量和数据大小的变化之间进行取舍,但mod_gzip中没有配置指令能够控制压缩级别。如果流式压缩产生的CPU负载成问题,可以考虑在磁盘或内存中缓存经过压缩的组件。mod_gzip提供了选项,可以将保存压缩过的内容自动保存在磁盘上,并在原内容发生变化时更新压缩过的内容。使用mod_gzip_can_negotiate和mod_gzip_update_static指令可以完成这一任务。

Apache2.x使用mod_deflate模块。对压缩脚本和样式表的基本配置: AddOutputFilterByType DEFLATE text/html text/css application/x-javascript

和mod_gzip不同,mod_deflate包含了一个用于控制压缩级别的指令——DeflateCompressionLevel。

代理缓存

当浏览器通过代理来发送请求时,情况就变得复杂了。假设某url发送到代理的第一个请求来自于一个不支持gzip的浏览器。这是到达代理的第一个请求,因此缓存为空。代理会将请求转发到web服务器。此时服务器的响应是未经过压缩的。这个没有压缩的响应被代理缓存起来并发送给浏览器。假设到达代理的第二个请求是来自同一个url,来自于一个支持gzip的浏览器。代理会使用缓存中(未经压缩)的内容进行响应,这就失去了进行压缩的机会。如果顺序反了,情况可能更加严重。

解决的方法是在web服务器的响应中添加Vary头,告诉代理根据一个或多个请求头来改变缓存的响应。因此需要在服务器的Vary响应头中包含Accept-Encoding. Vary: Accept-Encoding 默认情况下,mod_gzip会向所有响应添加Vary: Accept-Encoding头。

浏览器边缘情形

不是所有浏览器都完美支持压缩

在Apache1.3可以通过在mod_gzip_item_include中使用恰当的User-Agent值来指定浏览器白名单: mod_gzip_item_include reqheader "User-Agent: MSIE [6-9]" mod_gzip_item_include reqheader “User-Agent: Mozilla/[5-9]”

在Apache2.x使用BrowserMatch指令 BrowserMatch ^MSIE [6-9] gzip BrowserMatch ^Mozilla/[5-9] gzip

将代理缓存加进来,把User-Agent作为代理的另外一种评判标准添加到Vary头中。 Vary: Accept-Encoding,User-Agent mod_gzip检测到你在使用浏览器白名单时,会自动将User-Agent字段添加到Vary头中,不幸的是,由于User-Agent有上千种值,代理不太可能为其所代理的所有url缓存Accept-Encoding和User-Agent的所有组合。甚至这样可能会导致完全禁用为响应包进行的缓存。另外一种方法是使用Vary: 或Cache-Control: private头来禁用代理缓存。因为Vary: 头防止了浏览器使用缓存的组件,不过最好使用Cache-Control: private,Google和Yahoo都使用了这种方式。

如何平衡压缩和代理支持的决定是很复杂的,需要在加快响应时间、减小带宽开销和边缘情形浏览器缺陷之间进行权衡。

[转载]原文链接:https://segmentfault.com/a/1190000020624496

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-76930.html

文章标题:《高性能网站建设指南》规则4—压缩组件

相关文章
如何编写干净高效的CSS代码
其实CSS的学习并不困难,但在一些较为大型的项目中就显得杂乱无章,变得很难管理,尤其是不同的人编写CSS的风格总会略有不同,从团队合作的层面上来说,就更加难以沟通,所以,我们为此总结了一些如何实现高效整洁的CSS代码原则: 使用Reset但...
2015-11-12
网站变灰代码
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: g...
2015-11-12
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
2015年2月国内操作系统市场份额概况,xp占46.29%,
规则调整:2012年6月1日开始,Mac操作系统中不再包含ipad、iphone市场份额。 ...
2015-11-12
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
2014年十大编程语言
近日,IEEE Spectrum推出了一个最流行的编程语言排行榜。排行榜筛选了12项指标,综合了10个来源(含 IEEE Xplore、Google、GitHub)的数据,最终评选出了下面这个排行榜(满分100,得分越高排名越靠前),其中的...
2015-11-11
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
回到顶部