HTTP 缓存

• 强缓存（不需要发起请求查询，首先检查强缓存）
• 协商缓存（需要发起请求查询）
• 缓存位置

强缓存

• Expires（http1.0）：即过期时间，告诉浏览器过期之前都可以从缓存中获取数据，不用重新发起请求，但可能前后端时间不一致导致缓存失败。
• Cache-Control（http1.1）：过期时长
  • max-age=3600
  • public： 客户端与代理服务器均缓存
  • private： 仅客户端缓存
  • no-cache： 跳过当前强缓存，进入协商缓存
  • no-store： 不缓存
  • s-maxage：代理服务器的缓存时间
  • must-revalidate： 缓存一旦过期，则回到源服务器验证

协商缓存

• Last-Modified： 最后的修改时间，由服务器在响应头中加上此字段给浏览器，如果浏览器再次请求此资源，则会在请求头中携带 If-Modified-Since 字段，此字段为服务器传来的最后的修改时间，服务器拿到该时间后会与服务器中这个时间做对比，判断是否需要 返回新资源 或 304
• ETag： 服务器根据资源内容生成的 唯一标志，只要里面内容有改动则会变，服务器通过响应头把这个值返回给浏览器。浏览器再次请求该资源时，会将该值放在请求头中携带 If-None-Match 字段，服务器根据这个值判断是否需要 返回新资源 或 304
• 两者对比：Etag 精度高，但性能不佳，两者都支持的情况下，服务器优先考虑 ETag

缓存位置

• Service Worker（离线缓存就是 Service Worker Cache）
• Memory Cache（小的 js、css 文件缓存进内存，大的文件进磁盘）
• Disk Cache（内存使用率较高时，文件优先进入磁盘）
• Push Cache（http2 推送缓存）

总结

• 首先通过 Cache-Control 验证 强缓存 是否可用
• 强缓存可用，直接使用
• 否则进入 协商缓存 ，即发送 http 请求，服务器通过请求头中的 If-Modified-Since 和 If-None-Match 这些条件请求字段检查资源是否更新
• 若资源更新，则返回资源和 200 状态码
• 否则，返回 304 状态码，告诉浏览器直接从缓存中获取资源