浏览器缓存类型

强缓存

强缓存指的是缓存在内存(Memory Cache)和硬盘(Disk Cache)的内容。

强缓存的产生依赖于响应头中的expires字段和cache-control字段。

• expires字段是Http1.0的产物，表示缓存的到期时间。
• cache-control字段是Http1.1的产物，表示缓存最大可用时长，有以下配置：
  • Max-age: 缓存的时长，单位为秒
  • no-cache：忽略强缓存，直接访问协商缓存·
  • no-store：忽略强缓存和协商缓存，直接访问服务器
  • public：所有数据可以在任意地方缓存
  • private：默认，所有内容只有客户端可以缓存

浏览器针对这两种类型的强缓存，缓存的位置的选择，可能通过以下原则：

1、内存缓存：存放脚本、base64数据和字体等

内存缓存小图片

2、硬盘缓存：会存放样式文件、图片、比较大的文件等

硬盘缓存比较大的文件

协商缓存

当强缓存失效后，浏览器就会携带缓存标志向服务器发送请求。

• 响应头字段，服务器自动返回：
  • Etag：服务器基于某种规则对资源生成一个标志，类似于hash的作用
  • If-None-Math：文件最后修改时间
• 请求头字段，浏览器自动携带：
  • Last-Modified：对应的是Etag的值
  • If-Modifie-Since：对应的Last-Modified的值

服务器根据这两个值进行匹配，如果相等，说明文件没有发生变化，返回304，浏览器从缓存中取；

如果不相等，服务器发送最新的内容，返回200。

如以下内容，cache-control的强缓存时长设置为0，强缓存过期时间为0，不知道在强缓存中获取资源，进行协商缓存，etag不变，返回304，读取浏览器缓存。

• 请求头：

1. • If-None-Match: W/"8043560548d710d08b50ffc528cc770d"

• 响应头：
  • Cache-Control: max-age=0, private, must-revalidate
  • ETag:W/"8043560548d710d08b50ffc528cc770d"

Service Worker Cache

如果开启了Service Worker Cache，在强缓存和协商缓存中间，则会增加一步，从Service Worker中判断缓存。

service worker 缓存类型