Http 缓存机制及其原理

Question

一、缓存规则解析

为方便大家理解，我们认为浏览器存在一个缓存数据库,用于存储缓存信息。

在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，将数据存储至缓存数据库中。

HTTP缓存有多种规则，根据是否需要重新向服务器发起请求来分类，我将其分为两大类(强制缓存，对比缓存)

强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。

基于对比缓存的流程下，不管是否使用缓存，都需要向服务器发送请求，那么还用缓存干什么？(答案见下文)

两类缓存规则可以同时存在，强制缓存优先级高于对比缓存，也就是说，当执行强制缓存的规则时，如果缓存生效，直接使用缓存，不再执行对比缓存规则。

强制缓存

在缓存数据未失效的情况下，可以直接使用缓存数据，那么浏览器是如何判断缓存数据是否失效呢？

对于强制缓存来说，响应 header 中会有两个字段来标明失效规则（Expires/Cache-Control）

使用 chrome 的开发者工具，可以很明显的看到对于强制缓存生效时，网络请求的情况

1.Expires

Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。 不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。 另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。 所以HTTP 1.1 的版本，使用Cache-Control替代。

2.Cache-Control

Cache-Control 是最重要的规则。常见的取值有 private、public、no-cache、max-age，no-store，默认为 private。

• private: 客户端可以缓存
• public: 客户端和代理服务器都可缓存（前端的同学，可以认为 public 和 private 是一样的）
• max-age=xxx: 缓存的内容将在 xxx 秒后失效
• no-cache: 需要使用对比缓存来验证缓存数据（后面介绍）
• no-store: 所有内容都不会缓存，强制缓存，对比缓存都不会触发（对于前端开发来说，缓存越多越好，基本上和它说886）

比如：

图中 Cache-Control 仅指定了 max-age，所以默认为 private，缓存时间为 31536000 秒（365天） 也就是说，在 365 天内再次请求这条数据，都会直接获取缓存数据库中的数据，直接使用。

强制缓存的数据存放

from memory cache：字面理解是从内存中，其实也是字面的含义，这个资源是直接从浏览器的内存中拿到的， 不会请求服务器，一般已经加载过该资源且缓存在了内存当中，点那个关闭该页面时，此资源就被内存释放掉了， 再次重新打开相同的页面时不会出现 from memory cache 的情况而会出现 from disk cache 并且将缓存再次 加载到内存中，所以再刷新一下又会出现from memory cache。

from disk cache：同上类似，此资源是从磁盘当中取出的，也是再已经再之前的某个时间加载过该资源， 不会请求服务器，但是此资源不会随着该页面的关闭而释放掉，因为是存在硬盘当中的，下次打开仍会 from disk cache

对比缓存

对比缓存，顾名思义，需要进行比较判断是否可以使用缓存。 浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。

再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断。 判断成功后，返回304状态码，通知客户端比较成功，可以使用缓存数据。

通过两图的对比，我们可以很清楚的发现，在对比缓存生效时，状态码为304，并且报文大小和请求时间大大减少。\ 原因是，服务端在进行标识比较后，只返回header部分，通过状态码通知客户端使用缓存，不再需要将报文主体部分返回给客户端。

对于对比缓存来说，缓存标识的传递是我们着重需要理解的，它在请求header和响应header间进行传递，一共分为两种标识传递，接下来，我们分开介 绍。

1.Last-Modified/If-Modified-Since：

Last-Modified：服务器在响应请求时，告诉浏览器资源的最后修改时间。

If-Modified-Since：再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。服务器收到请求后发现有头 If-Modified-Since 则与被请求资源的最后修改时间进行比对。

• 若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；
• 若资源的最后修改时间小于或等于 If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

2.Etag/If-None-Match

优先级高于 Last-Modified/If-Modified-Since

Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定,比如一种简单的方法是对文件内容计算 md5 值作为 ETag）。

If-None-Match： 再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。

服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；

相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

两种对比缓存的比较（last-modified/etag）

使用基于最后修改时间的缓存存在一些缺点，比如，有时候一些文件需要频繁的更新，但是内容可能并没有变化，那么如果采用 基于最后修改时间的缓存，那么每次文件的最后修改时间变化后，不论内容是否真的变化，浏览器都会重新获取全部内容； 再比如，同一个文件存储在多台WEB服务器上，用户的请求在这些服务器上轮询，实现负载均衡，而这些服务器上同一个文件 的最后修改时间很难保证完全相同，这便会导致用户的请求每次切换到新的服务器时就需要重新获取所有内容。 这时候，如果直接使用标记内容的某种ETag算法，就可以避免这些问题。

二、如何请求页面

1.Ctrl+F5

这种请求方式可以叫强制刷新，它使得网页及其中得所有组件都直接向Web服务器发送请求，并且不使用缓存协商，这样的目的使获取所有内容的最新版本。你也可以按住Ctrl键然后单机浏览器的刷新按钮获得同样的结果。在实际使用中很少会有用户这样操作。

2.F5

这种方式便是一般的刷新，我们经常使用，它等同于单击浏览器的刷新按钮。它允许浏览器在请求中附加必要的缓存协商，但不允许浏览器直接使用本地缓存，也就是说，它能够让Last-Modified发挥作用，但是对Expires无效。

3.单击浏览器地址栏的 转到 按钮或者通过超链接跳到此页

这种方式允许浏览器以最少的请求来获取网页的数据，浏览器会对所有没有过期的内容直接使用本地缓存，所以，Expire 标示只对这种方式有效，以后你不用再按了F5键后对浏览器没有使用本地缓存感到奇怪。

三、总结

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。