Http协议、浏览器缓存缓存机制, 304 ,200 from cache

http缓存一直有在用,也听前辈讲过,今天打算自己总结一下,把不同情况都试了一遍,发现网上有些内容并不全对。

首先,我们知道,浏览器缓存后,在浏览器的network中看到的状态码分两种情况,304200 OK from cache

本文的测试均是在Chrome下进行的,服务器是nginx,首先看下nginx的配置

1
2
3
4
5
6
7
8
9
10
location / {
ssi on;
ssi_silent_errors on;
ssi_types text/shtml;
expires 1d;
add_header Cache-Control max-age=86400;
etag on;
root C:/dev/nginx/html/;
index index.html index.htm;
}

304

304是协商缓存,表示请求了服务器,但是内容没有变化,从浏览器本地缓存取数据

304 是通过按浏览器上的刷新按钮或者按F5刷新得到的状态码

从下图可以看到,headers中有etag属性,etag是资源的唯一标识,如果内容变了,etag会改变

Last-Modified 也是用于协商缓存的Last-Modified的值表示内容最后修改时间

浏览器请求已经缓存的资源时,会把etag和Last-Modified发送给服务器,服务器对比,如果浏览器发送来的和服务器的值相等,说明内容没有变化,服务器返回304给浏览器,浏览器从缓存读取数据


200 OK from cache

200 OK from cache 表示浏览器没有发出网络请求,直接取的本地缓存

200 OK from cache 是通过在地址栏回车得到的状态码

如下图,没有etag属性。etag是服务器计算出来的唯一值,因为没有请求服务器,所以也不会有etag标识

expires、Cache-Control

expires 表示过期日期,是绝对值。适用于http1.0协议

Cache-Control 表示缓存的时间,是相对值,比如3600,表示3600秒后失效。适用于http1.1及以上

如有expires和Cache-Control 同时存在,Cache-Control优先级更高

Cache-Control: no-cache:这个很容易让人产生误解,使人误以为是响应不被缓存。实际上Cache-Control: no-cache是会被缓存的,只不过每次在向客户端(浏览器)提供响应数据时,缓存都要向服务器评估缓存响应的有效性。

Cache-Control: no-store:这个才是响应不被缓存的意思。

Pragma: no-cache:跟Cache-Control: no-cache相同,Pragma: no-cache兼容http 1.0 ,Cache-Control: no-cache是http 1.1提供的。


参考文档

200 OK (from cache) 与 304 Not Modified
nginx expires控制页面缓存
http中Cache-Control详解