html response 中 expire 、Last-Modified 的意义

网站的性能(Performance)要考虑两方面,一方面是在Server端的运行效率,另一方面是在Client端感受到的效率。不要以为Server端效率高这个网站或者服务给用户的体验就是高效的,如果不考虑影响Client Performance的因素,Server端跑得再快用户也可能感觉慢得和牛一样。

Yahoo的哥们做的研究真不是盖的,他们还写了本书《High Performance Web Sites》详细介绍如果提高Client Performance。公司内部也有一个Team做这方面的事情,听过他们的培训,和Yahoo说的差不多,所谓英雄所见略同。


当服务器发出响应的时候,可以通过两种方式来告诉客户端缓存请求:

第一种是Expires,比如:

Expires: Sun, 16 Oct 2016 05:43:02 GMT

在此日期之前,客户端都会认为缓存是有效的。

不过Expires有缺点,比如说,服务端和客户端的时间设置可能不同,这就会使缓存的失效可能并不能精确的按服务器的预期进行。

第二种是Cache-Control,比如:

Cache-Control: max-age=315360000

这里声明的是一个相对的秒数,表示从现在起,315360000秒内缓存都是有效的,这样就避免了服务端和客户端时间不一致的问题。

Last-Modified / If-Modified-Since

Last-Modified是响应头,If-Modified-Since是请求头。Last-Modified把Web组件的最后修改时间告诉客户端,客户端在下次请求此Web组件的时候,会把上次服务端响应的最后修改时间作为If-Modified-Since的值发送给服务器,服务器可以通过这个值来判断是否需要重新发送,如果不需要,就简单的发送一个304状态码,客户端将从缓存里直接读取所需的Web组件。

ETag / If-None-Match

ETag是响应头,If-None-Match是请求头。Last-Modified / If-Modified-Since的主要缺点就是它只能精确到秒的级别,一旦在一秒的时间里出现了多次修改,那么Last-Modified / If-Modified-Since是无法体现的。相比较,ETag / If-None-Match没有使用时间作为判断标准,而是使用一个特征串。Etag把Web组件的特征串告诉客户端,客户端在下次请求此Web组件的时候,会把上次服务端响应的特征串作为If-None-Match的值发送给服务端,服务端可以通过这个值来判断是否需要从重新发送,如果不需要,就简单的发送一个304状态码,客户端将从缓存里直接读取所需的Web组件。


304 的过程

HTTP的Response中还会有另外一个Header叫Last-Modified,比如“Last-Modified: Thu, 06 Apr 2006 21:17:12 GMT”,浏览器访问一个URI得到这样的Resposne之后,就知道这个资源最后一次的修改时间,下次需要再次获得这个资源的时候,会发一个Request给Server,不过这个Request中有一条“If-Unmodified-Since: Thu, 06 Apr 2006 21:17:12 GMT”,如果在Server端在这个日期之后对这个资源进行了修改,就会照常返回这个资源给Client端,但是如果没有修改,就会返回一个304 (Not Modified) Response而不返回资源,告诉Client端:“这个资源从上次给你之来从来没改过,你放心用你Cache中的好了。” 一个304 Response比一个静态资源通常小多了,这样就节省了网络带宽。

让我们回过头来比较一下Expires和Last-Modified这两个东西,似乎Last-Modified比不上Expires,因为虽然它能够节省一点带宽,但是还是逃不掉发一个HTTP请求出去,而Expires却使得浏览器干脆连HTTP请求都不用发,岂不痛快!那还要Last-Modified这个物体干什么?理想状况的确是这样,不过当用户在IE或者Firefox里面按F5或者点击Refresh按钮的时候(不是在URL栏里重新输入一遍URL然后回车),就算对于有Expires的URI,一样也会发一个HTTP请求出去,所以,Last-Modified还是要用的,而且要和Expires一起用。


参考:http://hi.baidu.com/hins_pan/item/370069476a500937fb89606d

可以按照以下步骤来实现这个需求: 1. 遍历数组对象 times,找到最后一个 expire 属性为 true 的对象。可以使用 JavaScript 的 for 循环和 if 条件语句来实现。 2. 给最后一个 expire 属性为 true 的对象添加 expire-last:true 属性。可以直接通过对象的属性来进行修改。 3. 给其他对象添加 expire-last:false 属性。同样可以使用 for 循环和 if 条件语句来实现。 4. 修改原数组对象 times。可以直接对数组对象进行修改,或者创建一个新的数组对象来存储修改后的数据。 下面是示例代码: ``` // 假设数组对象 times 如下所示: let times = [ {expire: true, time: 100}, {expire: false, time: 200}, {expire: true, time: 300}, {expire: true, time: 400}, {expire: false, time: 500}, ]; // 找到最后一个 expire 属性为 true 的对象,并添加 expire-last:true 属性 let lastExpireTrueIndex = -1; for (let i = 0; i < times.length; i++) { if (times[i].expire) { lastExpireTrueIndex = i; } } if (lastExpireTrueIndex !== -1) { times[lastExpireTrueIndex]['expire-last'] = true; } // 给其他对象添加 expire-last:false 属性 for (let i = 0; i < times.length; i++) { if (!times[i].hasOwnProperty('expire-last')) { times[i]['expire-last'] = false; } } // 修改原数组对象 times console.log(times); ``` 在上述示例代码,我们首先遍历数组对象 times,找到最后一个 expire 属性为 true 的对象,并添加 expire-last:true 属性。接着,我们遍历数组对象 times,给其他对象添加 expire-last:false 属性。最后,我们修改原数组对象 times,并输出修改后的结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值