关于HTTP缓存机制

作者: 小杺 | 来源:发表于2018-05-30 00:16 被阅读2次

关于HTTP缓存机制
浅谈浏览器缓存
【转载】彻底理解浏览器的Http缓存机制
2020-08-14 彻底理解浏览器的Http缓存机制
缓存机制
让我们学习了解浏览器的缓存，提高页面的流畅度
浏览器的缓存机制
HTTP缓存机制
http的缓存机制(个人笔记)
HTTP浏览器缓存机制详解

HTTP缓存规则

根据是否需要重新向服务器发起请求来分类，将其分为两大类:

强制缓存
相对缓存（条件缓存）

缓存规则解析

情况一

为方便大家理解，我们认为浏览器存在一个缓存数据库,用于存储缓存信息。
在客户端第一次请求数据时，此时缓存数据库中没有对应的缓存数据，需要请求服务器，服务器返回后，将数据存储至缓存数据库中。

httpcache1.png

情况二

已存在缓存数据时，仅基于强制缓存，请求数据的流程如下

httpcache2.png

情况三

已存在缓存数据时，仅基于对比缓存，请求数据的流程如下

httpcache4.png

对缓存机制不太了解的同学可能会问，基于对比缓存的流程下，不管是否使用缓存，都需要向服务器发送请求，那么还用缓存干什么？
这个问题，我们暂且放下，后文在详细介绍每种缓存规则的时候，会带给大家答案。

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

强制缓存

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

httpcache6.png

什么情况下会触发强制缓存呢

在Expires的有效期内，这个资源会执行强制缓存规则
在cache-control的max-age没过期时会执行强制缓存规则

下面介绍三个和页面缓存有关的<meta>选项

Expires

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

＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞

Cache-Control

Header Type: General Header

no-store缓存不应存储有关客户端请求或服务器响应的任何内容。

<meta http-equiv="cache-control" content="no-cache">

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

此外：cache-control 的no-cache和max-age设置会覆盖expires 的设置

Pragma

Header Type: General Header, but response behavior is not specified and thus implementation-specific.

注意：由于 Pragma 在 HTTP 响应中的行为没有确切规范，所以不能可靠替代 HTTP/1.1 中通用首部 Cache-Control，尽管在请求中，假如 Cache-Control 不存在的话，它的行为与 Cache-Control: no-cache 一致。建议只在需要兼容 HTTP/1.0 客户端的场合下应用 Pragma 首部。
所以：Pragma: no-cache可以应用到http 1.0 和http 1.1,而Cache-Control: no-cache只能应用于http 1.1.

与 Cache-Control: no-cache 效果一致。强制要求缓存服务器在返回缓存的版本之前将请求提交到源头服务器进行验证。（此命令的作用在于，强制浏览器进行条件缓存的判断）
no-cache 的效果是：并不是不缓存，数据会被缓存，但是在每次http请求都会和服务器确认缓存版本是否最新,请求会跳过查找缓存服务器

此外：

no-cache 在存在缓存服务器的情况下：跳过请求缓存服务器
在没有缓存服务器情况下，无视expires 和 max-age 直接用etag和last-modified

＜meta http-equiv="Pragma" content="no-cache"＞

缓存策略关系

2.jpg

对比缓存（条件缓存/比较缓存）

概念

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

第一次访问：

1.png

第二次访问：

2.png

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

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

Last-Modified / If-Modified-Since

Last-Modified：

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

3.png

If-Modified-Since：

再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。
服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。
若资源的最后修改时间大于If-Modified-Since，说明资源又被改动过，则响应整片资源内容，返回状态码200；
若资源的最后修改时间小于或等于If-Modified-Since，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

4.png

Etag / If-None-Match（优先级高于Last-Modified / If-Modified-Since）

Etag：

服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。

5.png

If-None-Match：

再次请求服务器时，通过此字段通知服务器客户段缓存数据的唯一标识。
服务器收到请求后发现有头If-None-Match 则与被请求资源的唯一标识进行比对，
不同，说明资源又被改动过，则响应整片资源内容，返回状态码200；
相同，说明资源无新修改，则响应HTTP 304，告知浏览器继续使用所保存的cache。

6.png

用户操作行为与浏览器缓存

用户操作	Expires/Cache-Control	Last-Modified/ETag
地址栏回车	有效	有效
页面链接跳转	有效	有效
新开窗口	有效	有效
前进后退	有效	有效
F5 刷新	无效	有效
Ctrl+F5 强制刷新	无效	有效

当用户在按 F5 进行刷新时，浏览器会忽略 Expires/Cache-Control 的设置，再次向服务器发送请求，而 Last-Modified/Etag 仍然是有效的，服务器会根据情况判断返回 304 还是 200 ；而当用户使用 Ctrl+F5 进行强制刷新的时候，所有的缓存机制都将失效，；浏览器将重新从服务器下载资源并返回 200。