乐趣区

浏览器缓存解析

浏览器缓存
浏览器缓存分为几个阶段:
浏览器缓存阶段
一. 强制缓存阶段
1.cache-control: 决定了浏览器端和服务器端缓存的策略,可以出现在响应头 response header 中,或者 请求头 request header 中

max-age:指定缓存的最大有效时间,eg:cache-control:max-age=315360000, 注意与 expires 做区分(与 cache-control 平级),max-age 优先级高于 expires,这个属性时 HTTP1.1 中新增的属性

s-maxage:指定 public 的缓存,缓存设备有很多,不仅仅浏览器是缓存设备,在整个网络中,可能会存在代理服务器,CDN 属于 public 缓存设备,因为可以多用户访问并读取信息;什么是 private 缓存呢,指的是只是你个人访问的设备,浏览器就属于 private 缓存设备,eg:s-maxage=31536000;他的优先级高于 max-age,只能设定 public 的缓存设备
private
public

no-cache:错误理解:不使用缓存;no-cache 指的是不管本地是否设置了 max-age(即忽略本地浏览器端的缓存策略),都要向服务器端发送请求,由服务器端来判断缓存情况

no-store:完全不使用任何的缓存策略,不管是服务器端还是浏览器端的

2.expires:Thu, 14 Mar 2019 17:29:17 GMT,这个属性时 HTTP1.0 中配置,

缓存过期时间,用来指定资源到期时间,是服务器端具体的时间点。
告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求。

二. 协商缓存阶段
基于客户端和服务器端的协商缓存机制
1.last-modified
last-modified – response headerif-modified-since – request header
需要与 cache-control 共同使用,如果配置了 max-age 且没有过期,就不会使用 last-modified;过期了之后,才会使用 last-modified。
last-modified 缺点:

服务器端不能精确获取 文件变更时间时
文件修改时间改了,文件内容没有变
以秒为单位,如果是 ms 内修改了文件,就体现不出来

2.ETag
文档内容的 hash 值 ETag —- response headerif-None-Match —-request header
etag 优先级高于 last-modified
状态码解析

200(from cache): 浏览器端缓存,cache-control:max-age=315360000 或者 expires 起作用

304: 服务器端缓存,last-modified 或者 etag 起作用
200:浏览器端没有缓存,或者服务器端缓存失效,或者用户点击了 ctrl+F5 浏览器直接从服务器端下载最新的数据

注意:Chrome 浏览器,手动点击刷新按钮都会 在请求头中,添加 chche-control:max-age=0, 这样就肯定不会使用浏览器端的缓存!
更加详细,请参考:缓存详解

退出移动版