文章参考: https://my.oschina.net/ososchina/blog/494074
https://www.zhihu.com/question/28725359 https://juejin.im/post/5a64541bf265da3e2d338862
· 200 OK (from cache) 指的是浏览器都没和服务器确认,直接用了浏览器缓存.
· 304 Not Modified 比 200 OK (from cache) 慢,指的是浏览器还向服务器确认了下 "If-Not-Modified",才用的缓存.
1) 关于 Last-Modified
在浏览器第一次请求某一个 URL 时,服务器端的返回状态会是 200,资源响应头有一个 Last-Modified 的属性标记此文件在服务期端最后被修改的时间,另外一半也有个 Etag,格式类似这样:
Last-Modified:Fri, 15 Feb 2013 03:06:18 GMT
ETag:"be15b26c29bce1:0" #可选,这里为了准确确认资源是否变化 (毫秒级)
举例
请求头:
1.png
客户端第二次请求此 URL 时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 和 If-None-Match(可选报头,值 Etag 的值) 报头,询问该时间之后文件是否有被修改过.
响应头:
2.png
如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed.)状态码,内容为空,否则重新发起请求,请求下载资源这样就节省了传输数据量.当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似.从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源.
过程如下:
客户端请求一个页面(A).
服务器返回页面 A,并在给 A 加上一个 Last-Modified/ETag.
客户端展现该页面,并将页面连同 Last-Modified/ETag 一起缓存.
客户再次请求页面 A,并将上次请求时服务器返回的 Last-Modified/ETag 一起传递给服务器.
服务器检查该 Last-Modified 或 ETag,并判断出该页面自上次客户端请求之后还未被修改,直接返回响应 304 和一个空的响应体.
此外,如果缓存服务器版本,类型不同,建议使用 Last-Modified,Etag 可能造成缓存无法验证的问题
二. 缓存有效期期的实现(Cache-Control 与 Expires)
HTTP 中,通过 Cache-Control 首部和 Expires 首部为文档指定了过期时间,通过对过期时间的判断,缓存就可以知道文档是不是在保质期内.Expires 首部和 Cache-Control:max-age 首部都是来告诉缓存文档有没有过期,为什么需要两个响应首部来做这件简单的事情了?其实这一切都是历史原因,Expires 首部是 HTTP 1.0 中提出来的,因为他使用的是绝对日期,如果服务端和客户端时钟不同步的话(实际上这种情况非常常见),缓存可能就会认为文档已经过了保质期.
Last-Modified&Cache-Control 与 Expire 比较
1.Last-Modified & Cache-Control
设置 header("Last-Modified:".gmdate("D, d M Y H:i:s", time())."GMT");
Last-Modified 虽然使用了缓存,但是每次打开页面依然需要向服务器发起 http 请求,浏览器根据用户的 $_SERVER['HTTP_IF_MODIFIED_SINCE'] 来判断浏览器的内容是否过期,没过期的话返回 304 状态,浏览器内容从缓存中读取.
此外 Cache-Control 也很重要,如果他的值是 max-age=0,max-stable,min-refresh 等于 0 或 no-store 之类的,缓存是不会被缓存的, 每次都会请求服务器.如果是 max-age,max-stable,min-refresh[大于 0] 或 only-if-cached,immutable,那么很可能出现 from cache 现象.
2.Expires 缓存控制
设置 header("Expires:".gmdate("D, d M Y H:i:s", time()+$cache_time)."GMT");
状态码依然是 200,时间依然是旧的时间,Size 栏目显示为 from cache,表示内容是直接从浏览器读取,浏览器根本就没有向服务器发起 http 请求.
3.png
2)200 OK (from cache) 实现方案
Status 200 Ok (from cache) 出现的条件是 Cache-Control 或者 Expires 满足一定的条件.
注意:缓存控制是服务器进行报头建议,以下报头是响应头,不是请求头
2.1 使用 Cache-Control
.[(max-age|max-stable|min-refresh) = 缓存创建时间 < 当前系统时间][immutable][only-if-cached]
.缓存必须带有ETag或者Last-Modified
Cache-Control:public,Max-Age=84800
ETag:"f6c01531e9c65fa96f3d40409fd030f1"
image
2.2 Expires 不能过期
Expires:Sun, 31 Jul 2016 00:19:47 GMT
image
以上 2 种方案只要实现一种即可实现资源 from cache
对于浏览器而言,还有一种数据是 DataURL 协议的数据,这种数据也会从缓存读取,实现 from cache , 但是,如果将所有数据转码成 DataURL, 会出现性能问题.
image
三. 缓存使用技巧
①. 无论是开发阶段还是生产阶段,建议使用 Cache-Control + Last-Modified 或 Tag 控制缓存
②. 开发阶段, 建议使用 Cache-Control:[no-cache,no-store|Max-Age=0] 这样可以阻止浏览器使用缓存
③无论是开发阶段还是生产阶段,如果是永远不会被更改的资源,那么建议使用缓存 Cache-Control:[Max-Age=3600][only-if-cached][immutable] 从而实现 from cache,减少 http 请求.
④. 如果是生产阶段建议使用 Cache-Control:Max-Age=3600[no-cache|] ,缓存 1 小时,每次必须到服务器进行校验
⑤禁止缓存
Cache-Control: no-cache, no-store, must-revalidate
⑥缓存静态资源也可以加上 public,实现跨域缓存共享
Cache-Control:public, max-age=31536000,no-cache
⑦ must-revalidate,校验本地缓存是否过期,过期了才去请求服务器更新缓存
⑧ 默认情况下,Cache-Control:public 缓存都回去和服务器校验的
来源: http://www.jianshu.com/p/19597bdab5b6