浅析浏览器缓存

一、HTTP缓存

Web 缓存大致可以分为：数据库缓存、服务器端缓存（代理服务器缓存、CDN 缓存）、浏览器缓存。

浏览器缓存也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。这里我们只讨论 HTTP 缓存相关内容。

HTTP缓存指的是: 当客户端向服务器请求资源时，会先抵达浏览器缓存，如果浏览器有“要请求资源”的副本，就可以直接从浏览器缓存中提取而不是从原始服务器中提取这个资源。

浏览器缓存主要是 HTTP 协议定义的缓存机制。HTML meta 标签，例如：

<META HTTP-EQUIV="Pragma" CONTENT="no-store">

含义是让浏览器不缓存当前页面。但是代理服务器不解析 HTML 内容，一般应用广泛的是用 HTTP 头信息控制缓存。

二、浏览器请求数据过程

2.1 首次请求

第一次请求时，缓存中没有数据，浏览器需要请求服务器拿到数据，服务器返回后。将数据存储至缓存中。

2.2 第N次请求时

通过时序图，直观了解下两种缓存规则（强制缓存和协商缓存），强制缓存优先级高于协商缓存。

2.2.1 基于强制缓存，缓存命中

2.2.2 基于强制缓存，缓存未命中

2.2.3 基于协商缓存，缓存命中

2.2.4 基于协商缓存，缓存未命中

我们可以看到两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而协商缓存不管是否生效，都需要与服务端发生交互。
两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行协商缓存规则。

三、相应Header解析

使用控制台，可看到网络请求状况，缓存数据从memory cache/disk cache读取。

3.1 强制缓存参数

对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）
Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。
Cache-Control 是最重要的规则。常见的取值有private、public、no-cache、max-age，no-store，默认为private。

3.2 协商缓存参数

协商缓存，需要进行比较判断是否可以使用缓存。
浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据
协商缓存的主要控制参数(ETag/Last-Modify)
ETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化*。ETag值的变更则说明资源状态已经被修改。服务器根据浏览器上发送的If-None-Match值来判断是否命中缓存。
Last-modify是一个时间标识该资源的最后修改时间，例如last-modified: Thu, 27 Aug 2020 07:53:55 GMT。

问题：既生Last-Modified何生Etag？
你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

1. Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间
2. 如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存
3. 有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形
   Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

四、浏览器数据请求流程图