HTTP 缓存的关键路径

1、证件照场景

拍一次证件照麻烦且费钱，所以每次拍的时候咱们都会多留几张备用。这就是计算机世界的缓存，在现实世界中的写照。

若是某个行为很消耗资源，很麻烦，那在实现它的时候就顺便多保留几份，这种行为就是缓存。特色很明显

• 容量有限，咱们不可能留一屋子的备用照片

• 有时效性，小时候的证件照长大了不能用吧

2、HTTP 缓存

缓存是一个比较笼统的概念，几乎任何行为均可以将结果缓存起来，尤为那些模块与模块的链接处，例如计算机世界的数据库查询，网络I/O等等，而人类世界诸如找人事部开收入证实、去婚姻登记处开未婚证实等等基本上会多开两三份。

本文讨论的是 HTTP 协议层面的缓存，它规范了浏览器和服务器在发送和接收到 HTTP 报文时，应该怎么解析和处理其中的缓存逻辑。其关键路径以下图所示

图 1 HTTP 缓存关键路径

3、关键路径之验证缓存

浏览器发起一个请求，生成 HTTP 报文，先发送到缓存器，缓存器验证是否有本地缓存，缓存是否过时等，即图 1 的第一条路径，称之为验证缓存。

这个过程有三种结果：

• 不存在缓存

• 存在缓存，且缓存未过时（由 Cache-control 或 Epire 决定）

• 存在缓存，但缓存已过时

若是存在缓存，且缓存未过时，则使用缓存响应客户请求，而不会向服务器发送请求。其它两种状况，都会将 HTTP 报文发送给服务器，那么服务器将怎么处理？

4、关键路径之服务器再验证

HTTP 报文通过缓存器进行验证后，除了使用本地缓存的状况，其余都会向服务器发请求，服务器处理逻辑以下

• 本地不存在缓存状况，报文将直接被发送给服务器，服务器响应请求，而且在响应的报文中带上资源的缓存控制信息

• 若是本地存在缓存，但缓存已过时，那么缓存器将在请求报文中带上 if-None-Match（取值对应ETag） 和 if-Modified-Since （取值对应 Last-Modified），服务器分别对这两个字段进行校验。有更新则返回新的资源文件、新缓存控制信息；没有更新则返回 30四、以及新的缓存控制信息，浏览器更新缓存，并响应本地缓存文件。

服务器响应的缓存控制信息，包含Cache-Control 和 Expire，以及 ETag 和 Last-Modified，如图2

图2 服务器正常响应包含的缓存控制信息

5、小结

完整的关键路径，存在如下可能

图3 缓存关键路径的几种状况

• 浏览器第一次访问某文件，本地无缓存，服务器响应文件资源，并包含 Cache-Control 和 Expire，浏览器缓存器据此缓存资源。报文还会包含 ETag 和 Last-Modified

• 浏览器再次请求该文件，若是有缓存，由缓存信息中的 Cache-Control 和 Expire 决定缓存是否过时，没过时则直接使用缓存；过时则利用ETag 和 Last-Modified 询问服务器是否修改过该文件，服务器验证后，发现文件修改过则响应新的文件和缓存控制信息，缓存器更新缓存并响应新文件；若未修改过则返回304和缓存控制信息，缓存器更新缓存控制信息，并响应本地缓存文件给浏览器

6、问题

完整的关键链路已经说完！比较理想的状况下，有ETag、Last-Modified，有Cache-Control、Expire，但实现又不老是完美的，关于缓存还有如下问题须要弄清楚

1. 服务器没有响应 Cache-Control、Expire 会出现什么状况？这种状况下，ETag 和 Last-Modified 还有用吗？

2. ETag 和 Last-Modified 功能有些相似，它们的做用有何区分？Expire 和 Cache-Control max-age 存在一样的问题。

3. ETag 是什么？Last-Modified 又是什么？

4. 怎么设置这些头部信息？

5. 浏览器点击刷新按钮，点击从新加载会出现什么状况？客户端向服务器发送Cache-Control 会出现什么状况Cache-Control 的取值有不少，各自的意义是什么？