浏览器缓存机制

来一张图 大概了解一下 后面详细解说~

4

上图所述:

 1.浏览器发出请求，检查本地是否有缓存

 2.如果有缓存，判断缓存是否过期

 3.如果过期，向服务器发送验证当前本地资源是否可用，如果可用，返回状态码304，使用本地缓存，如果不可用返回状态码200，并返回新资源，并把资源写入到缓存中，

 4.如果没有过期，直接载入缓存资源使用

Etag和Last-Modidied字段又代表什么意思呢？作用是什么？

这两个字段是在资源返回的时候请求header头携带回来的

Etag字段:表示请求资源在服务器的唯一标识,浏览器可以根据Etag值缓存数据,下次请求的时候以if-none-match字段请求

Last-Modidied字段:用于标记请求资源的最后一次修改时间,请求的时候if-modified-since字段请求

怎么判断缓存是否可用？（cache-control与Expires）

cache-control与Expires作用是一致的,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存数据，还是重新发送请求到服务器取数据，只不过cache-control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires

怎么判断是否有缓存？

在第一次请求页面成功返回资源后,会记录的每一个缓存文件与其url的对应关系,存储在本地,下一次再请求的时候或者浏览器打开之后,通过请求资源的url去匹配是否有对应的资源,来确认这个文件是否有缓存

缓存位置:ServiceWorker  MemoryCache  DiskCache  PushCache

ServiceWorker : 与浏览器其他的缓存机制不同,它可以让我们*控制缓存哪些文件,如何匹配缓存,如何读取缓存,并且缓存是持续性的

MemoryCache : 也就是内存中的缓存,一旦我们关闭Tab,内存中的缓存也就被释放了,内存缓存资源时并不关心,返回资源的HTTP缓存头,cache-control是什么值,同时资源的匹配也并非仅仅是对url做匹配,还可能会对content-type Cors等其他特征做校验

DiskCache  : 就是存储在硬盘中的缓存,读取速度慢,但什么都能存到磁盘中,比MemoryCache 容量大

PushCache : 只在session中存在 一旦会话结束就被释放,并且缓存时间也很短暂