关于浏览器缓存的那些事

对比缓存(添加标志位) 与 强制缓存(直接获取数据)
 
已存在缓存数据时,仅基于强制缓存,请求数据的流程如下
 
已存在缓存数据时,仅基于对比缓存,请求数据的流程如下
 
强制缓存  200 from cache
 Expire :服务端返回的到期时间 ,如果浏览器与服务器时间不同可能会造成误差 http1.0
Cache-control :是最重要的规则。常见的取值有private、public、no-cache、max-age,no-store,默认为private。
private:             客户端可以缓存
public:              客户端和代理服务器都可缓存(前端的同学,可以认为public和private是一样的)
max-age=xxx:   缓存的内容将在 xxx 秒后失效,失效之前都不会向浏览器发起请求 (200 from momery)
s-maxage :     只能public缓存(比如cdn)优先级高于max-age (200 from disk )
no-cache:          需要使用对比缓存来验证缓存数据(后面介绍) 一定发起请求
no-store:           所有内容都不会缓存,强制缓存,对比缓存都不会触发(对于前端开发来说,缓存越多越好,so...基本上和它说886)‘
 
对比缓存
Last-Modified  /  If-Modified-Since
Last-Modified:服务器在响应请求时,告诉浏览器资源的最后修改时间。
If-Modified-Since:再次请求服务器时,通过此字段通知服务器上次请求时,服务器返回的资源最后修改时间。 返回304或200
 
Etag  /  If-None-Match(优先级高于Last-Modified  /  If-Modified-Since)
Etag:服务器响应请求时,告诉浏览器当前资源在服务器的唯一标识(生成规则由服务器决定)。
If-None-Match:再次请求服务器时,通过此字段通知服务器客户段缓存数据的唯一标识。
 
 通常过程
200 from memory cache不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。但是这种方式只能缓存派生资源
200 from disk cache不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。这种方式也只能缓存派生资源
304 Not Modified访问服务器,发现数据没有更新,服务器返回此状态码。然后从缓存中读取数据。
 
 
三级缓存原理
先去内存看,如果有,直接加载
如果内存没有,择取硬盘获取,如果有直接加载
如果硬盘也没有,那么就进行网络请求
 
 
加载到的资源缓存到硬盘和内存
一般浏览图片,如下流程:
访问-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)
application cache和上面缓存有点区别,是离线缓存,就是资源可以从硬盘上读取而不用联网,即使断网,用户也可以浏览。
设置浏览器缓存
304是协商缓存还是要和服务器通信一次,要想断绝服务器通信,就要强制浏览器使用本地缓存(cache-control/expires),

猜你喜欢

转载自www.cnblogs.com/ou-blog/p/10568925.html