浏览器缓存机制思维导图

这是一篇关于浏览器缓存机制的知识导图，内容涵盖了浏览器缓存、缓存位置、实际应用场景、用户行为的影响等，详细的思维导图能帮助你更好的了解知识！

浏览器缓存机制

• 缓存位置
  • Service Worker
    • 自由控制缓存哪些文件、如何匹配缓存、如何读取缓存
    • 并且缓存是持续性的
  • Memory Cache
    • 读取高效
    • 缓存持续时间很短
  • Disk Cache
    • 读取速度慢
    • 比之Memory Cache胜在容量和存储时效性上
  • Push Cache
    • 只会在会话（Session)中存在
    • 会话结束就释放，并且缓存时间也很短暂。
• 用户行为的影响
  • 地址栏输入地址
    • 查找disk Cache中是否匹配
    • 没有匹配则发送网络请求
  • 普通刷新F5
    • 优先使用Memory Cache
    • 其次是Disk Cache
  • 强制刷新Ctrl+F5
    • 浏览器不适用缓存
• 实际应用场景
  • 频繁变动的资源
    • Cache-Control no-cache
  • 不常变化的资源
    • Cache-Control max-age=31536000
• 浏览器缓存
  • 强缓存
    • Expires
      • 指定资源到期的时间，是服务器端的具体时间点
      • 修改了本地时间，可能会导致缓存失效
    • Cache-Control
      • 可以组合使用多种指令
    • 两者对比
      • Cache-Control优先级高于Expires
      • Expires是https的产物
      • Cache-Control是http1.1的产物
  • 协商缓存
    • Last-Modified/If-Modified-Since
      • 只能以秒计时，有局限性
    • ETag/If-None-Match
      • 相应请求时，返回一个唯一标识ETag
      • ETag由服务器生成，资源变化时会重新生成ETag
      • 优先级上，服务器校验优先考虑Etag
  • 缓存机制
    • 强缓存优先于协商缓存
    • 协商缓存失效，返回200，重新返回资源和缓存标识
    • 协商缓存生效，则返回304，继续使用缓存