23、浏览器缓存

浏览器缓存

浏览器缓存主要指的是 HTTP 缓存，浏览器本质是将资源缓存到本地内存和磁盘中的
HTTP 缓存只支持 GET 响应，其他类型的响应无法缓存

简单理解缓存：

优点：下次资源加载时，可以直接从缓存里面拿，这样节省请求时间
缺点：未及时更新缓存，容易导致资源过老

缓存分类

强缓存 - 简单理解：

协商(对比)缓存 - 简单理解：

强制缓存优先级高于协商(对比)缓存，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

浏览器的缓存规则是服务器通过响应头返回的

强制缓存

特点：满足强制缓存后，无需发起 http 请求

强制缓存用到的响应头为：Expires 和 Cache-Control
Expires：缓存到期时间，若下次请求时间小于该值，则直接使用缓存数据，无需发起 http 请求
Cache-Control：控制缓存策略
private: 客户端可以缓存（默认）
public：客户端和服务器等都可以缓存
max-age=xxx：缓存内容过期时间(秒)
no-cache：使用对比缓存策略
no-store：禁止缓存

举例：
Cache-Control 仅使用了 max-age=31536000，则默认为 private（仅客户端可以缓存），并且 31536000 秒(365 天)后过期，再次期间直接用缓存数据

协商（对比）缓存

特点：始终都会发起 http 请求
协商缓存例子：

第一次正常访问，第二次协商缓存生效，则状态为 304，对应的 size、time 也大大减小
原因是：协商缓存生效后，只会返回 header 部分，通过状态码告知客户端可使用缓存数据

协商缓存规则是在客户端与服务端传递的
规则一：Etag / If-None-Match
服务器返回响应头：Etag，值为当前资源在服务器的唯一标志
客户端请求响应头：If-None-Match，值为 Etag 的值，服务器发现有这个请求头后，则与该资源最新标志对比
若一样，则资源无修改，返回 304，客户端继续使用缓存数据
若不一样，则资源有修改，返回最新资源，状态码为 200，客户端使用返回的数据

规则二：Last-Modified / If-Modified-Since
服务器返回响应头：Last-Modified，值为当前资源最后修改时间
客户端请求响应头：If-Modified-Since，值为 Last-Modified 的值，服务器发现有这个请求头后，则与该资源最新修改时间对比
若小于等于 If-Modified-Since，则资源无修改，返回 304，客户端继续使用缓存数据
若大于 If-Modified-Since，则资源有修改，返回最新资源，状态码为 200，客户端使用返回的数据

总结