Web前端性能优化教程02:添加Expires头和压缩组件

本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头。完整教程可查看Web前端性能优化

什么是Expires头?

Expires存储的是一个用来控制缓存失效的日期。当浏览器看到响应中有一个Expires头时,它会和相应的组件一起保存到其缓存中,只要组件没有过期,浏览器就会使用缓存版本而不会进行任何的HTTP请求。Expires设置的日期格式必须为GMT(格林尼治标准时间)。

HTTP1.1协议中缓存的另一种选择

Expires存在着明显的不足。

首先,Expires头使用的是一个特定的时间,要求客户端和服务器端的时钟严格同步。何为严格同步?我们知道客户端的时间是可以修改的,如果服务器和客户端的时间不统一,这就导致有可能出现缓存提前失效的情况,存在不稳定性。其次,假如Expires的日期到来了,那么还需要在服务器配置中提供一个新的日期。

面对这种情况,HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久,使用秒为单位,例如Cache-Control:max-age=3600;表示组件将被缓存60分钟。如果max-age和Expires同时出现,则max-age有更高的优先级,浏览器会根据max-age的时间来确认缓存过期时间。

Cache-Control除了可以设置max-age之外,还可以同时设置其他标签。如下图所示常用标签:

如何配置过期缓存?

在ASP.NET下,可以通过web.config文件来配置缓存。

  • <!--单独配置Expires-->
  • <system.webServer>
  • <staticContent>
  • <clientCache cacheControlMode="UseExpires" httpExpires="Sun, 29 Mar 2020 00:00:00 GMT"/><!--表示过期时间为2020年3月29号-->
  • </staticContent>
  • </system.webServer>
  • <!--单独配置max-age-->
  • <system.webServer>
  • <staticContent>
  • <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:01:00"/><!--表示过期时间为(30*24*60*60+60)s后-->
  • </staticContent>
  • </system.webServer>

基础知识

gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Unix系统的文件压缩,凭借着良好的压缩效率,现在已经成为Web上使用最为普遍的数据压缩格式。

压缩是如何工作的

客户端请求报文中包含Accept-Encoding表示客户端能识别的压缩方法,如果客户端请求报文没有包含Accept-Encoding首部,服务器就会假设客户端能够接受任何编码格式;服务器响应报文中包含Content-Encoding表示采用的压缩方法。(然而,一个统计表明,大约有15%的客户端请求是没有Accept-Encoding请求的,因为客户端的一些web代理和PC安全软件会移除浏览器发出的Accept-Encoding,因为监听未经压缩的响应会占用更少的CPU资源,但却无疑增加了网络传输的时间。)

应该对什么资源使用压缩

基于文本的资源如html,js,css,xml都适用于压缩。然而对于图片而言,却不应该对图片进行压缩,因为图片本身是已经被压缩过了,如果再进行gzip压缩,有可能得到的结果是和图片本身大小相差不大或更大,这样就浪费了服务器的CPU资源来做无用功了。

压缩的优缺点

优点:压缩组件可以减少Http响应时间,提升传输效率。 缺点:服务器要通过花费额外的CPU周期来完成压缩,客户端要对压缩文件进行解压缩。

总体来说,使用压缩还是利大于弊的,不过需要合理地使用压缩,通过选择对一定范围大小的组件进行压缩和选择要压缩组件的类型,能使得收益最大化。

考虑代理缓存的情况

代理缓存服务器是一个中间层,位于客户端和服务器之间。使用代理缓存的情况下,浏览器将不直接与服务器通信,而是通过代理发送请求。这种情况下,压缩就要考虑额外的东西了。

首先,假设到达代理的是一个来自不支持gzip的浏览器的请求,代理会将请求转发到web服务器,此时web服务器的响应是未经过压缩的,这个响应会把代理服务器缓存起来并发给浏览器。现在,假设到达代理的第二个请求来自一个支持gzip浏览器,请求的是与之前相同的URL,代理会直接使用未经压缩的缓存响应,那么久失去了进行压缩的机会了。考虑更糟糕的情况,第一个请求来自支持gzip的浏览器,第二个请求来自不支持gzip的浏览器,这样第二个请求得到的缓存响应将无法被解码,导致出错。

解决这一问题的方法就是在Web服务器的响应中添加Vary头,Vary:Accept-Encoding,表示web服务器告诉缓存服务器分别为每一个Accpet-Encoding请求头缓存。在前面的例子中,代理通过识别Vary头,对响应缓存不同的版本,避免出错。

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

nginx 总结

1. Nginx无法启动解决方法 在查看到logs中报了如下错误时: 0.0.0.0:80 failed (10013: An attempt was made...

4619
来自专栏李家的小酒馆

JS传递函数并且调用

1802
来自专栏Java技术栈

干货 | 彻底弄懂 HTTP 缓存机制及原理

Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是...

1723
来自专栏曾大稳的博客

OkHttp系统拦截器

RealConnection、ConnectionPool、StreamAllocation

3112
来自专栏Golang语言社区

Golang语言作为服务器,H5作为前端的视频传输

demo下载地址: http://www.golangweb.com/forum.php?mod=viewthread&tid=2688&from=portal...

5059
来自专栏奇梦博客

运行网站出现Too many open files,CentOS 6.x和CentOS 7.x解决方法

针对新手使用Appnode常见问题: 有没有安装完Appnode,配置好网站正常运行一段时间出现报错: Too many open files  出现以上报错可...

7669
来自专栏zhangdd.com

设置Mysql的连接超时参数wait_timeout、interactive_timeout

最近处理一个web服务时,写数据库数据时,经常报“MySQL server has gone away”,一查发现是mysql的wait_timeout、int...

2892
来自专栏java一日一条

web中缓存的几种方式

应用程序把动态文件生成的html文件缓存到文件服务器,以后用户请求动态文件,直接从文件服务器加载对应的静态缓存的html文件返回给用户,这里面主要节省了动态语言...

6522
来自专栏linux系统运维

Linxu的救援模式

2225
来自专栏奇梦博客

运行网站出现Too many open files,CentOS 6.x和CentOS 7.x解决方法 Linux 面板

1503

扫码关注云+社区

领取腾讯云代金券