资讯专栏INFORMATION COLUMN

HTTP CACHE 中的ETAG,LAST_MODIFY,MAX-AGE实验

RayKr / 855人阅读

摘要:稍后的里有比较详细的说明我们常用的就是和一起来用,上代码这样做的好处是双重验证,同时满足两者条件才会缓存失效,弥补了的粒度最多为秒的问题以及的打开关闭即更改时间的问题。防止的就是代理服务器等自作聪明,认为没有过期。

用世界上最好的语言演示一下etag

第一次请求,服务器返回200.我分别列下请求头【RequsetHeaders】和响应头【ResponseHeaders】

请求头

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Host:kache.com
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.

响应头

Request URL:http://kache.com/etag.php
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:80

Connection:Keep-Alive
Content-Type:text/html
Date:Tue, 07 Mar 2017 13:02:13 GMT
Etag:966aa4bd5183fd9358fd222647c5c6a3
Keep-Alive:timeout=5, max=99
Server:Apache/2.4.10 (Win32) OpenSSL/0.9.8zb mod_fcgid/2.3.9
Transfer-Encoding:chunked
X-Powered-By:PHP/5.4.33

需要注意第一次请求头没有If-None-Match:,注意第一次响应头有Etag:这个标签,注意第一次是200


第二次请求

请求头:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:zh-CN,zh;q=0.8,en;q=0.6
Cache-Control:max-age=0
Connection:keep-alive
Host:kache.com
If-None-Match:966aa4bd5183fd9358fd222647c5c6a3
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

响应头:

Request URL:http://kache.com/etag.php
Request Method:GET
Status Code:304 Not Modified
Remote Address:127.0.0.1:80

Connection:Keep-Alive
Date:Tue, 07 Mar 2017 13:02:16 GMT
Keep-Alive:timeout=5, max=98
Server:Apache/2.4.10 (Win32) OpenSSL/0.9.8zb mod_fcgid/2.3.9

需要注意第二次请求头有If-None-Match:,注意第二次响应为304


再用php语言演示一下Last-Modified

If-Modified-Since[请求头的] 和 Last-Modified [响应头的]这一对关系的HADER头我这里就不贴了。稍后的ppt里有比较详细的说明


我们常用的就是Last-Modified和Etag一起来用,上php代码

这样做的好处是双重验证,同时满足两者条件才会缓存失效,弥补了modify的粒度最多为秒的问题以及modify的打开关闭即更改时间的问题。当然etag也会有坑,不同物理机可能会导致相同文件不同结果(没实验过)


直接上NGINX配置示例

毕竟php做服务端水平有限,大家可以参考 swoole framework OR workerman中对etag和modify的处理。

不多说,上NGINX配置段,为了演示modify ,可以在/etc/nginx/nginx.conf中把etag关闭

http {

        ##
        # Basic Settings
        ##
        etag  off;
        ...

关于其他静态文件缓存的设置

location ~* .(?:css)$ {
  #expires 1y;
  add_header  Cache-Control max-age=5;
  add_header Cache-Control "public";
  add_header  Last-Modified "";
}

简单对以上括号内代码说明:

expires 1y; 是http协议1.0写法,1.1对应的是cache-contorl:max-age="";前者为GMT绝对时间,后者为相对时间。

add_header Cache-Control max-age=5; 缓存5秒,如果没有Last-Modified(即设置了 add_header Last-Modified "";) ,期间会一直直接请求服务器,服务器一直返回200,如果有设置Last-Modified,5秒后会请求一次服务器,5秒前会返回304.

简单归纳Last-Modified和max-age(expires)关系

如果设置了max-age=0,而没有启用modify,那么不会缓存

如果单单启用modify,而没有max-age==0.也会缓存

如果启用了modify,并且 max-age=0,那么不会缓存

如果设置了max-age=1000,但没有启用modify ,不会缓存

再此说明上面配置导致的结果:5秒内如果文件有变化,那么客户端不会有任何感知。5秒后将会重新发起请求,得到200响应。然后再缓存5秒【注意没有开启etag】


下面这个例子和上面一样,是针对图片等,缓存1一个月,即使服务端删除了,1个月内也会正常显示(除非ctrl+f5,或者服务端重启了)public代表任何代理服务器都可以缓存,对应的为private,只允许客户端浏览器缓存。

location ~* .(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  add_header Cache-Control "public";
  add_header  Last-Modified "";
}

那需要有更改就更新,怎么办?
location ~* .(?:css)$ {
  expires 1y;
 # add_header  Cache-Control max-age=5;
 # add_header Cache-Control "public";
 # add_header  Last-Modified "";
}

以上配置虽然过期时间是一年,但是服务端会返回Last-Modified,来确认,意思为你就vim了一下xx.css,即使没有做任何更改,浏览器也会重新发起请求。你要是没改,那八成就一年后见了。

那我就不想缓存怎么办?

用cache-control:控制
用no-cahce【浏览器端等可以缓存,但是没有什么卵用】
用no-store【浏览器端等不用缓存,不用费劲。每次都跟我服务端请求】
用must-revalidate,浏览器端别整没用的,到期了就马上跟我请求。麻溜的必须。防止的就是代理服务器等自作聪明,认为没有过期。

location ~* .(?:js)$ {
  add_header  Cache-Control no-cache;
  add_header  Cache-Control must-revalidate;
}
测试代码和PPT在这里

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/61838.html

相关文章

  • HTTP缓存机制详解

    摘要:在此,我会尝试用简单明了的文字,像大家系统的介绍缓存机制,期望对各位正确的理解前端缓存有所帮助。两类缓存规则可以同时存在,强制缓存优先级高于对比缓存,也就是说,当执行强制缓存的规则时,如果缓存生效,直接使用缓存,不再执行对比缓存规则。 前言 在请求一个静态文件的时候(图片,css,js)等,这些文件的特点是文件不经常变化,将这些不经常变化的文件存储起来,对客户端来说是一个优化用户浏览体...

    tinna 评论0 收藏0
  • HTTP缓存机制详解

    摘要:在此,我会尝试用简单明了的文字,像大家系统的介绍缓存机制,期望对各位正确的理解前端缓存有所帮助。两类缓存规则可以同时存在,强制缓存优先级高于对比缓存,也就是说,当执行强制缓存的规则时,如果缓存生效,直接使用缓存,不再执行对比缓存规则。 前言 在请求一个静态文件的时候(图片,css,js)等,这些文件的特点是文件不经常变化,将这些不经常变化的文件存储起来,对客户端来说是一个优化用户浏览体...

    yzzz 评论0 收藏0
  • web性能优化之:no-cache与must-revalidate深入探究

    摘要:本文仅挑这两个进行值进行探究对比。注意变化了,表示源服务器资源已发生变化。从日志来看,缓存服务器访问源服务器,并返回给浏览器。缓存服务器上已有该资源副本,且该副本未过期。缓存服务器本身优化算法对实验结果的影响。 引言 稍微了解HTTP协议的前端同学,想必对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道。 常见的值有有private、public、no-store、...

    alexnevsky 评论0 收藏0
  • 缓存浅析

    摘要:概念缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。缓存能缓解服务器压力,提高响应速度,提升用户体验。以下讨论的缓存是针对对资源而言的,且缓存策略都是依靠报文的首部来实现。参考缓存控制小结浅谈浏览器的缓存机制 概念 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。——MDN 缓存能缓解服务器压力,提高响应速度,提升用户体验。 以下讨论的缓存是针对对img/scrip...

    Shonim 评论0 收藏0
  • 缓存浅析

    摘要:概念缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。缓存能缓解服务器压力,提高响应速度,提升用户体验。以下讨论的缓存是针对对资源而言的,且缓存策略都是依靠报文的首部来实现。参考缓存控制小结浅谈浏览器的缓存机制 概念 缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。——MDN 缓存能缓解服务器压力,提高响应速度,提升用户体验。 以下讨论的缓存是针对对img/scrip...

    VishKozus 评论0 收藏0

发表评论

0条评论

RayKr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<