是什么？

浏览器缓存是浏览器自动存储的，且常常会在开发中遇到缓存问题，需要手动清理缓存

缓存类型

浏览器有两种缓存类型：

• 内存缓存
• 硬盘缓存

内存缓存（from memory cache）

字如其名，就是存在在内存中的缓存

特点：

• 快速读取：内存缓存会将编译解析后的文件直接存入 该进程的内存 中，占据进程的一定内存资源，方便下次快速读取
• 时效性：内存缓存的时效特别短，一但进程关闭，该进程的内存会同步清空

硬盘缓存（from disk cache）

字如其名，就是存在在硬盘中的缓存

特点：

• 读取速度慢：和我们学习硬件知识一样，硬盘的速度会低内存很多，所以读取速度慢
• 时效性：硬盘缓存的时效性高，直接将缓存存入硬盘，一般删除后或者过期后才会失效

匹配优先级

浏览器缓存顺序为 from memory cache → from disk cache

1. 查找内存
2. 查找硬盘
3. 网络请求
4. 缓存至 硬盘、内存

一些小知识

• 一般 JavaScript 代码都是存在于 内存缓存 中，因为 Js脚本 可能随时会运行，比如你点击一个按钮
• 一般 CSS 代码存在于 硬盘缓存 中，因为层叠样式表加载一次即可渲染出网页

强制缓存

强制缓存也可以叫做强缓存。字如其名，的意思就是这段数据一但缓存在浏览器中，浏览器便读取浏览器缓存、不再请求服务器，直至该缓存被删除，亦或者该强制缓存已过期。

强制缓存的三种情况

强制缓存会向浏览器缓存查找该请求结果，并根据缓存规则来决定是否使用

• 不存在该缓存的 缓存结果 和 缓存标识 ，强制缓存失效，直接向服务器发送请求
• 存在该缓存的 缓存结果 和 缓存标识 ，但该结果已失效
• 存在该缓存的 缓存结果 和 缓存标识 ，且结果未失效，强制缓存生效，直接返回结果

强制缓存对应的字段

• Expires （HTTP1.0）
  • 过期时间由时间控制
  • 由于时间由服务器返回，可能由于时区不同导致过期时间错乱
• Cache-Control （HTTP1.1）
  • 过期时间由时长控制
  • 和本地缓存时的时间 + 时长控制，不会受时区影响
  • 值：
    • public：所有内容都将被缓存（客户端、代理服务器）
    • private：所有内容只有客户端可以缓存（默认值）
    • no-cache：不经过强制缓存
    • no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存
    • max-age=xxx (xxx is numeric)：缓存内容将在xxx秒后失效

可以看到：

• HTTP响应报文中expires是一个绝对值
• HTTP响应报文中Cache-Control是相对值

Cache-Control优先级高于expires，直接根据Cache-Control的值进行缓存，在600秒内再次发起请求，则会直接使用缓存结果，强制缓存生效。

协商缓存

字如其名，协商缓存的意思是每次请求还需要和服务器协商。协商缓存第一次请求会带回来一个 缓存标识 ，第二次请求拿 缓存标识 和服务器做对比，如果没有更新才使用缓存。

强制缓存的两种情况

• 协商缓存生效
• 协商缓存失效

协商缓存对应字段

Etag / If-None-Match优先级高于Last-Modified / If-Modified-Since，同时存在只有Etag / If-None-Match生效。

• Last-Modified / If-Modefied-Since
  • 优先级低
  • Last-Modified
    • 服务器响应时，返回该资源的最后修改时间
  • If-Modefied-Since
    • 客户端请求时，携带上次请求的最后修改时间，服务器做比较
      • 若该值小于服务器最后修改时间，返回200，重新返回请求资源
      • 若该值小于服务器最后修改时间，返回304，继续使用缓存
• Etag / If-None-Match
  • 优先级高
  • Etag
    • 服务器响应时，返回的生成资源的唯一标识
  • If-None-Match
    • 客户端请求时，携带唯一标识，服务器做比较
      • 若和服务器不同，返回200，重新返回请求资源
      • 若和服务器相同，返回304，继续使用缓存