深度学习HTTP(1.0/1.1/2区别/强缓存/协商缓存) 二

继上一部分对HTTP基础介绍，具体可以看一下小林的博客，非常详细

xiaolincoding.com/network/2_h…

# HTTP缓存机制详解

前言

在请求一个静态文件的时候（图片，css，js）等，这些文件的特点是文件不经常变化，将这些不经常变化的文件存储起来，对客户端来说是一个优化用户浏览体验的方法。那么这个就是客户端缓存的意义了。

Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节，同时对于有志成为前端架构师的同学来说是必备的知识技能。

但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。

---

强制缓存是根据过期时间来使用的，协商缓存标识是根据文件有没有修改来使用的，如果过期了就需要使用协商缓存来确定文件有没有修改，如果修改了就需要服务器返回修改后的资源，如果没有修改就还是可以使用缓存的资源。

强缓存有缺点，比如说，设置了expires，GMT格式，但是浏览器的时间可以改变，因此就通过cache-control返回一个相对时间来。但是假如说资源并没有更新，但是强缓存时间过期了，那就需要重新拉去资源，因此就有了last-modified，但是last-modified的时间单位是s，当1s内有资源修改，那浏览器返回的最后修改时间和上次的修改时间相同，那就不会重新拉取资源，因此推出了etag，通过比对资源内容来判断是否修改

相关的报文头

Cache-Control

请求/响应报文头，缓存控制字段，也就是用于控制资源生命周期，是 http/1.1 引入的属性。它支持多值，值用逗号分隔。作用方不仅限于客户端，有些指令还将作用在中间的缓存服务器上。

例子：

Cache-Control: private, max-age=0, no-transform 

Cache-Control 的指令梳理

代号：客户端（C）、缓存代理（P）、服务器（S）。
注：中括号表示可选项，尖括号表示参数。

属性名	发起方	作用方	说明
public	S	C/P	任何一方都可以缓存该资源。
private[=]	S	C/P	只允许客户端缓存，不允许缓存代理缓存。可选指定针对某些头部。
no-cache[=]	C/S	C/P	缓存代理不缓存；客户端缓存该资源，但每次都要询问是否更新，可以等价 max-age=0 。当服务器发起时可选指定针对某些头部。​
no-store	C/S	C/P	任何一方都不缓存该资源。
max-age=	C/S	C/P	设置缓存存储的最大周期，也就是说在这个秒数内不发起新请求。当客户端发送此指令给缓存代理时，代理能满足要求则直接返回给客户端，不必再次访问服务器。
no-transform	C/S	P	缓存代理不可更改媒体类型，这样做可防止代理执行压缩图片等类似操作。
s-maxage=	S	P	缓存代理可缓存的最长时间。
must-revalidate	S	C/P	可缓存但一旦资源过期必须再向源服务器进行确认，如果无法访问服务器则向客户端报 504 Gateway Timeout 。优先级高于 max-stale。
proxy-revalidate	S	P	与 must-revalidate 作用相同，但它仅适用于缓存代理。
max-stale[=]	C	P	客户端要求缓存代理该时间内（默认不限时间）的资源无论缓存有没有过期都返回给客户端。
min-fresh=	C	P	客户端要求缓存代理返回至少还未过指定时间的缓存资源，可以理解成限定了资源的最小生命期，在这生命期内才算有效。
only-if-cached	C	P	客户端要求缓存代理只返回有效的缓存，不需要向服务器对有效性进行确认，如果没有缓存则报 504 Gateway Timeout 。

补充说明

在 HTTP/1.1 中 Cache-Control 是优先级最高的缓存相关头部，部分决定是否缓存的指令（public、private、no-store）会起到直接决定的作用，也就是说如果决定不缓存了，那就不会再进行下一步关于是否过期的判断。在 HTTP/1.0 中 Cache-Control 会被忽略，降级为对 Expires 过期时间的判断。

Expires

响应报文头，代表资源过期时间，在过期之前缓存会一直保存，并且不会向服务器发起请求。由服务器返回提供，是 HTTP/1.0 的属性，在 HTTP/1.1 环境并且与 Cache-Control 共存的情况下，优先级要低。
Expires 的功能基本与 Cache-Control 的 max-age 指令相似，但它是指定一个过期时间点，而 Cache-Control 的 max-age 是指定了过期前的秒数。

例子：

Expires: Wed, 04 Jul 2020 08:26:05 GMT

Last-Modified

响应报文头，资源最终修改时间，由服务器告诉客户端。

例子：

Last-Modified: Wed, 23 May 2020 09:59:55 GMT

If-Modified-Since

请求报文头，与 Last-Modified 相对应，浏览器把服务器最后一次给的 Last-Modified 返回。服务器将以此进行对比，判断资源是否需要更新，如果请求的资源都没有过更新，则返回状态码 304 Not Modified 的响应。

例子：

If-Modified-Since: Thu, 15 Apr 2004 00:00:00 GMT

Etag

响应报文头，ETag 是 HTTP/1.1 标准开始引入的，对 Last-Modified 的补充。它是一种可将资源以字符串形式做唯一性标识的方式。服务器会为每份资源分配对应的 ETag 值。当资源更新时，ETag 值也需要更新。

ETag 的强弱之分

• 强 ETag：不论实体发生多么细微的变化都会改变其值。
• 弱 ETag：只用于提示资源是否相同。只有资源发生了根本改变，产 生差异时才会改变 ETag 值。这时，会在字段值最开始处附加 W/。

例子：

ETag: "usagi-1234" 
ETag: W/"usagi-1234"

为什么需要 ETag

• 一些周期性修改的文件，修改时间变了但内容没变，此时不希望重新获取；
• 一些文件修改非常频繁，比如1秒内修改了多次，Last-Modified 只能精确到秒；
• 一些服务器不能得到文件修改的精确时间。

额外注意

• ETag 没有规定生成的算法，每个服务器生成都可能不一样；
• 分布式系统里多台计算机间文件的 Last-Modified 必须一致，以免负载均衡到不同机器导致对比失败，因此分布式系统要统一 ETag 算法。

If-None-Match

请求报文头，是一种客户端向服务器提条件的方法，它与报文头 If- Match 作用相反。一般客户端把服务器最后一次给的 ETag 值通过 If-None-Match 返回，服务器将以此进行对比，判断资源是否需要更新。

例子：

If-None-Match:58b66ccbe349d0d931df877c00d8101d037243dc

协商流程

以下假定资源已经获取过一次，并且运行在HTTP/1.1环境下，现在进行二次访问。

流程图如下：

说明：

• 客户端是有可能因为缓存原因不向服务器发起任何请求的，图中 200 From Cache 就是这种情况。
• 服务器根据回传的 If-Modified-Since 与 Last-Modified 比对，如果不同则说明这个文件修改过，需要更新。但在这种判断精度是秒，如果是一秒内的改动，就需要进一步对比回传的 If-None-Match 与 ETag 的值。
• 服务器返回 304 Not Modified 的意思就是不需要重新获取新资源，直接使用本地缓存即可。

缓存多久合适

生存时间（TTL）指令告诉浏览器应该缓存某个资源多久，也就是 Cache-Control 或 Expires 的值。
找到给定资源的最佳TTL值并没有完美的科学方法。

指导原则：

• 纯静态内容，例如图片或带版本的数据，可以在客户端永久缓存；
• CSS/JS 和个性化资源，缓存时间大约是会话（交互）平均时间的两倍；

其他类型资源取决于新数据对旧数据的容忍极限。

浏览器操作对 HTTP 缓存的影响

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

---

---

在详细介绍这两种规则之前，先通过时序图的方式，让大家对这两种规则有个简单了解。

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

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

对缓存机制不太了解的同学可能会问，基于对比缓存的流程下，不管是否使用缓存，都需要向服务器发送请求，那么还用缓存干什么？

这个问题，我们暂且放下，后文在详细介绍每种缓存规则的时候，会带给大家答案。

我们可以看到两类缓存规则的不同，强制缓存如果生效，不需要再和服务器发生交互，而对比缓存不管是否生效，都需要与服务端发生交互。

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

强制缓存

从上文我们得知，强制缓存，在缓存数据未失效的情况下，可以直接使用缓存数据，那么浏览器是如何判断缓存数据是否失效呢？

我们知道，在没有缓存数据的时候，浏览器向服务器请求数据时，服务器会将数据和缓存规则一并返回，缓存规则信息包含在响应header中。

对于强制缓存来说，响应header中会有两个字段来标明失效规则（Expires/Cache-Control）使用chrome的开发者工具，可以很明显的看到对于强制缓存生效时，网络请求的情况。

Expires

Expires的值为服务端返回的到期时间，即下一次请求时，请求时间小于服务端返回的到期时间，直接使用缓存数据。

不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。

另一个问题是，到期时间是由服务端生成的，但是客户端时间可能跟服务端时间有误差，这就会导致缓存命中的误差。

所以HTTP 1.1 的版本，使用Cache-Control替代。

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:            所有内容都不会缓存，强制缓存，对比缓存都不会触发

举个例子：

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

没懂的话，我们换通俗一点的话来说一遍。当客户端第一次访问资源的时候，服务端在返回资源内容的同时也返回了Expires: Sun, 16 Oct 2016 05:43:02 GMT。

服务端告诉浏览器： 你Y的先把这个文件给我缓存起来，在这个过期时间之前，这个文件都不会变化了，你下次需要这个文件的时候，你就不要过来找我要了，你就去缓存中拿就好了，又快又好。

浏览器回答说：遵命。

于是在第二次html页面中又要访问这个资源的时候，并且访问的日期在Sun, 16 Oct 2016 05:43:02 GMT之前，浏览器就不去服务器那边获取文件了，自己从缓存中自食其力了。

但是呢，浏览器毕竟是在客户端的，客户端的时间可是不准确的，用户可以随着自己的喜好修改自己机器的时间，比如我把我机器的时间调成Sun, 16 Oct 2016 05:43:03 GMT，那么呢？我的浏览器就不会再使用缓存了，而每次都去服务器获取文件。于是，服务器怒了：给你个绝对时间，你由于环境被修改没法判断过期，那么我就给你相对时间吧。于是就返回了Cache-Control: max-age:600，浏览器你给我缓存个10分钟去。于是浏览器只有乖乖的缓存10分钟了。

但是问题又来了，如果有的服务器同时设置了Expires和Cache-Control怎么办呢？（不是闲的没事干，而是由于Cache-Controll是HTTP1.1中才有的）那么就是根据更先进的设置Cache-Control来为标准。

好了，现在有个问题，我有个文件可能时不时会更新，服务端非常希望客户端能时不时过来问一下这个文件是否过期，如果没有过期，服务端不返回数据给你，只告诉浏览器你的缓存还没有过期（304）。然后浏览器使用自己存储的缓存来做显示。这个就叫做条件请求。

对比缓存

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

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

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

Last-Modified / If-Modified-Since

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

If-Modified-Since：

再次请求服务器时，通过此字段通知服务器上次请求时，服务器返回的资源最后修改时间。

服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。

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

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

第一次客户端访问资源的时候，服务端返回资源内容的同时返回了ETag：1234，告诉客户端：这个文件的标签是1234，我如果修改了我这边的资源的话，这个标签就会不一样了。

第二次客户端访问资源的时候，由于缓存中已经有了Etag为1234的资源，客户端要去服务端查询的是这个资源有木有过期呢？所以带上了If-None-Match: 1234。告诉服务端：如果你那边的资源还是1234标签的资源，你就返回304告诉我，不需要返回资源内容了。如果不是的话，你再返回资源内容给我就行了。服务端就比较下Etag来看是返回304还是200。

各种刷新

理解了上面的缓存标签之后就很好理解各种刷新了。

刷新有三种

 

浏览器中写地址，回车
F5
Ctrl+F5
复制代码

假设对一个资源：

浏览器第一次访问，获取资源内容和cache-control: max-age:600，Last_Modify: Wed, 10 Aug 2013 15:32:18 GMT于是浏览器把资源文件放到缓存中，并且决定下次使用的时候直接去缓存中取了。

浏览器url回车

浏览器发现缓存中有这个文件了，好了，就不发送任何请求了，直接去缓存中获取展现。（最快）

下面我按下了F5刷新

F5就是告诉浏览器，别偷懒，好歹去服务器看看这个文件是否有过期了。于是浏览器就胆胆襟襟的发送一个请求带上If-Modify-since：Wed, 10 Aug 2013 15:32:18 GMT

然后服务器发现：诶，这个文件我在这个时间后还没修改过，不需要给你任何信息了，返回304就行了。于是浏览器获取到304后就去缓存中欢欢喜喜获取资源了。

但是呢，下面我们按下了Ctrl+F5

这个可是要命了，告诉浏览器，你先把你缓存中的这个文件给我删了，然后再去服务器请求个完整的资源文件下来。于是客户端就完成了强行更新的操作...

还有说一下，那个ETag实际上很少人使用，因为它的计算是使用算法来得出的，而算法会占用服务端计算的资源，所有服务端的资源都是宝贵的，所以就很少使用etag了。

缓存改进方案

md5/hash 缓存

通过不缓存 html，为静态文件添加 MD5 或者 hash 标识，解决浏览器无法跳过缓存过期时间主动感知文件变化的问题。

CDN缓存（代理缓存）

CDN 是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

缓存规则解析

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