解析强缓存与协商缓存

前言

在工作中，前端代码打包之后的静态需要部署到服务器上，这时就需要对一些静态资源做一些运维配置，其中缓存是必不可少的。

缓存的优点：

• 减少了不必要的数据传输
• 减轻了对服务器的压力，提升系统的性能
• 加快了用户加载网页的速度
• 提升了用户体验

缓存的缺点：

• 无法保证缓存数据与数据库中的数据保持同步
• 可能会出现缓存失效

一、强缓存

强缓存其实就是强制缓存的意思。当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间、缓存类型都由服务端控制，具体表现为：
respone header 的cache-control，常见的设置是max-age public private no-cache no-store等

强制缓存主要取决于两个字段 Expires 和 Cache-Control 中的 max-age 字段， 在
在的情况下， 其流程如下图所示

由图可知，当强制缓存中的两个字段同时存在的时候，Cache-Control中的max-age优先级要高，只有当Cache-Control失效时才会校验Expires字段。

强缓存总结

1. cache-control: max-age=xxxx，public
   max-age：表示缓存的时间（有效期）
   public：表示客户端和代理服务器都可以缓存该资源；但是，当用户重新刷新页面时，就会重新 发送请求，获取资源
2. cache-control: max-age=xxxx，private
   private：表示只让客户端可以缓存该资源；代理服务器不缓存
3. cache-control: max-age=xxxx，immutable
   immutable：表示即使用户重新刷新页面，也不会重新发送请求，还是直接读取缓存
4. cache-control: no-cache
   no-cache：表示不走强制缓存，但可以走协商缓存
5. cache-control: no-store
   no-store：表示不走缓存

二、协商缓存

当强制缓存时间过期后，这是客户端就会去请求服务器，在请求服务器的过程中可以设置协商缓存。

协商缓存主要由 ETag 和 Last-Modified 两个字段来实现

• ETag 是一个用于映射 web 资源的映射 token，具有唯一性

• Last-Modified 则通常是文件最后更新的日期时间戳

协商缓存的工作流程如下图所示：

1. 浏览器首次向服务器请求数据时， 服务器正常返回数据，同时在响应头中放入 ETag 和 Last-Modified 两个新字段
2. 浏览器第二次向服务器请求数据时， 浏览器会自动地在请求头附上 If-None-Match 和 If-Modified-Since 两个字段（分别对应的是 ETag 和 Last-Modified 的值，主要校验两者是否相等）， 然后由服务器端进行校验， 校验通过的话（表明数据有效）， 服务器会直接返回 状态码 304 ，且不携带响应体的报文段， 这相当于告诉浏览器：当前缓存有效， 可以直接使用！ 校验失败则会和首次请求一样， 返回状态码为200且携带数据响应体的报文段， 同时这个响应头会带上新的ETag 和Last-Modified， 为下一次协商缓存做好铺垫

总结

• 强制缓存发生在浏览器端， 协商缓存发生在服务器端
• 强制缓存在浏览器强制刷新的情况下不会生效， 而协商缓存则不受影响。
• 强制缓存返回的报文状态码为 200， 协商缓存返回的报文状态码为 304