Expires、Cache-Control、Last-Modified和If-Modified—Since、Etag和If-None-Match

太过爱你忘了你带给我的痛 2022-04-18 02:08 236阅读 0赞

**1.Expires**

页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。

Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本，直到指定的时间为止。例如：

Expires: Fri, 18 Mar 2016 07:41:53 GMT

Expires缺点： 它要求服务器和客户端时钟严格同步；过期日期需要经常检查

HTTP1.1中引入Cache-Control来克服Expires头的限制，使用max-age指定组件被缓存多久。

Cache-Control： max-age=12345600

若同时制定Cache-Control和Expires，则max-age将覆盖Expires头.

参考文章：[https://blog.csdn.net/an1090239782/article/details/78166983\#十三配置etag][https_blog.csdn.net_an1090239782_article_details_78166983_etag]

--------------------

**2.Cache-Control**

Cache-Control 是指缓存指令，这个指令控制谁在什么条件下可以缓存响应，以及可以缓存多久。这个协定取代了以前的 Expires 指令，在 HTTP/1.1 开始支持，在这么长时间后，我们可以认为 Cache-Control 在正常环境下都是支持的。Cache-Control的格式如下：

Cache-control: must-revalidate
    Cache-control: no-cache
    Cache-control: no-store
    Cache-control: no-transform
    Cache-control: public
    Cache-control: private
    Cache-control: proxy-revalidate
    Cache-Control: max-age=<seconds> //Cathe-Control：max-age=315360000
    Cache-control: s-maxage=<seconds>

**谁可以缓存**

public 与 private 用来指定谁可以缓存。public 是指任何资源都可以被缓存下来，即使某些部分需要 http 验证的情况下； private 则是要求针对单一用户进行缓存，其他用户是无法使用这一块缓存的。

**怎么缓存**

no-cache，no-store 与 no-transform 来指定怎么缓存。“no-cache”表示必须先与服务器确认返回的响应是否发生了变化，然后才能使用该响应来满足后续对同一网址的请求。因此，如果存在合适的校验值 (ETag)，no-cache 会发起往返通信来验证缓存的响应，但如果资源未发生变化，则可避免下载。相比之下，“no-store”则要简单得多。它直接禁止浏览器以及所有中间缓存存储任何版本的返回响应，例如，包含个人隐私数据或银行业务数据的响应。每次用户请求该资产时，都会向服务器发送请求，并下载完整的响应。如果没有指定这个字段，那么就认为是可以缓存的。

**缓存多久**

指令指定从请求的时间开始，允许获取的响应被重用的最长时间（单位：秒）。例如，max-age=60 表示可在接下来的 60 秒缓存和重用响应。

参考文章：[https://www.cnblogs.com/caiyanhu/p/6931624.html][https_www.cnblogs.com_caiyanhu_p_6931624.html]

HTTP1.1引入了Cathe-Control，它使用max-age指定组件被缓存多久，从请求开始在max-age时间内浏览器使用缓存，之外的使用请求，这样就可以消除Expires的限制，

如果对浏览器兼容性要求很高的话，可以两个都使用。

浏览器初次访问服务器——服务器返回200状态码和文件：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中取，

服务器收到请求后，判断文件是否被修改过，若是则直接返回200，否则返回304，浏览器将从缓存中获取文件。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

若同步刷新页面，则浏览器并不会先判断max-age，而是直接发送请求，服务器接收到请求后，判断文件是否有变化，若有则返回200，若没有则返回304。

**修改文件名**

浏览器利用max-age取出缓存有很大的缺陷，如果在max-age时间内，服务器文件有修改，这样用户就不能第一时间获取最新的信息，因此这里最有效的方法是修改请求的文件名。

但为了确保用户能获取组件最新版本，需要在整个项目中修改组件的文件名，这取决于你的html页面，这项工作可能很轻松也可能很痛苦，

这里先埋个伏笔：在生产环境中利用gulp和MD5加密自动化完成修订文件名功能。

参考文章：[https://www.cnblogs.com/zhutao/p/6690198.html][https_www.cnblogs.com_zhutao_p_6690198.html]

--------------------

客户端可以在HTTP请求中使用的标准 Cache-Control 指令。

Cache-Control: max-age=<seconds>
    Cache-Control: max-stale[=<seconds>]
    Cache-Control: min-fresh=<seconds>
    Cache-control: no-cache 
    Cache-control: no-store
    Cache-control: no-transform
    Cache-control: only-if-cached

服务器可以在响应中使用的标准Cache-Control指令。

**3.Last-Modified和If-Modified—Since**

Web页面设计中，建少HTTP请求可以提高页面响应速度。浏览器在第一次访问页面时下载的资源会缓存起来，第二次访问时会判断在缓存中是否已有该资源并且有没有更新过，如果已有该资源且没有更新过，则去缓存去取，这样减少了下载资源的时间。

原理上是通过HTTP Rquest Header中的 if-modified-since 和Response Headers中的last-modified来实现（还有一对组合If-None-Match和Etag，类似，但有细微差别，如有兴趣可参考链接Google Developers 优化性能指导）。

HTTP请求把if-modified-sincede 时间传给服务端，服务端把last-modified时间与之对比，如果相同，则意味着文件没有改动，则返回304，浏览器则从缓存中获取资源，无需下载。

虽然这种方法减少了已缓存资源的下载时间，但是仍然发起了一次http请求。仍然还有更激进的做法来节省也页面加载的时间，就是免去该资源的http请求。即本文的主角，HTTP的Expires和Cache-Control。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

参考文章：[https://www.jianshu.com/p/f331d5f0b979][https_www.jianshu.com_p_f331d5f0b979]

--------------------

除了服务端发送的 Cache-Control 指令外，可以做的更灵活一些，毕竟不是所有请求都适用于不变的 max-age。If-Modified-Since 和 Last-Modified 这一对就是另一种灵活的解决方案。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

Last-Modified 是由服务端返回的，用于告知客户端最后一次修改是什么时候。客户端需要记录下来这个值，并在下一次请求的时候，通过 If-Modified-Since 这个字段附上上一次服务端返回的 Last-Modified 的值。在这种情况下，服务端就有了两次时间，在通过比对后，就可以知道在这段时间内，内容是否发生了改变。如果没有发生变化，就会返回 304 NOT MODIFIED 这个状态码，而不是通常的 200。反之如果发生了变化，就进行正常的返回。

**4.Etag和If-None-Match**

还记得前面提交的 Etag 吗？这是从另一种维度上来确定 Cache 是否需要更新。服务端会返回相应的 Etag，这个 Etag 客户端不用关心其具体是怎么实现的，只需要能够记录下这个值就行。服务端是通过对内容进行 hash，或者别的算法来生成这样的 Etag，当客户端请求的时候，只需要去检查两者是否相同，即可知道内容有没有发生变化。返回的方式，与前面 If-Modified-Since and Last-Modified 相同。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]

--------------------

**什么是ETag？**

实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串，是web服务器用于确认缓存组件的有效性的一种机制，通常可以使用组件的某些属性来构造它。

**条件GET请求**

如果组件过期了，浏览器在重用它之前必须首先检查它是否有效。浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。

那么服务器是根据什么判断缓存是否还有效呢?有两种方式：

ETag（实体标签）；

最新修改日期；

**最新修改日期(Last-Modified)**

原始服务器通过Last-Modified响应头来返回组件的最新修改日期。

举个栗子：

当我们不带缓存访问www.google.com.hk的时候，我们需要下载google的logo，这时会发送这样一个HTTP请求：

GET googlelogo_color_272x92dp.png HTTP 1.1
    Host: www.google.com.hk

响应：

HTTP 1.1 200 OK
    Last-Modified:Fri, 04 Sep 2015 22:33:08 GMT

当需要再次访问相同组件的时候，同时缓存已经过期，浏览器会发送如下条件GET请求：

GET googlelogo_color_272x92dp.png HTTP 1.1
    If-Modified-Since:Fri, 04 Sep 2015 22:33:08 GMT
    Host: www.google.com.hk

响应：

HTTP 1.1 304 Not Modified

**实体标签**

ETag提供了另外一种方式，用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。摘抄自书上的例子：

不带缓存的请求：  
Request：

GET /i/yahoo/gif HTTP 1.1
    Host: us.yimg.com

Response:

HTTP 1.1 200 OK
    Last-Modified:Tue,12 Dec 200603:03:59 GMT
    ETag:”10c24bc-4ab-457elc1f“

再次请求相同组件:  
Request：

GET /i/yahoo/gif HTTP 1.1
    Host: us.yimg.com
    If-Modified-Since:Tue,12 Dec 200603:03:59 GMT
    If-None-Match:”10c24bc-4ab-457elc1f“

Response:

HTTP 1.1 304 Not Midified

**为什么要引入Etag？**

ETag主要是为了解决Last-Modified无法解决的一些问题：

1.一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET;

2.某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

3.某些服务器不能精确的得到文件的最后修改时间。

**Etag带来的问题**

ETag的问题在于通常使用某些属性来构造它，有些属性对于特定的部署了网站的服务器来说是唯一的。当使用集群服务器的时候，浏览器从一台服务器上获取了原始组件，之后又向另外一台不同的服务器发起条件GET请求，ETag就会出现不匹配的状况。例如：使用inode-size-timestamp来生成ETag，文件系统使用inode存储文件类型、所有者、组和访问模式等信息，在多台服务器上，就算文件大小、权限、时间戳等都相同，inode也是不同的。

**最佳实践**

1.如果使用Last-Modified不会出现任何问题，可以直接移除ETag，google的搜索首页则没有使用ETag。

2.确定要使用ETag，在配置ETag的值的时候，移除可能影响到组件集群服务器验证的属性，例如使用size-timestamp来生成时间戳。

**5.综合比较**

查看《现代前端技术解析》

如图，浏览器发起请求时，头部域字段的判断过程主要如下所述：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

1.浏览器会先查询Cache-Control（这里用Expires判断也是可以的，但是Expires一般设置的是绝对过期时间，在HTTP1.1之前较为通用，Cache-Control设置的是相对过期时间，HTTP1.1后推荐使用Cache-Control来控制，如果两者都设置了，则只有Cache-Control的设置生效）来判断内容是否过期，如果未过期，则直接读取浏览器缓存文件，不发送HTTP请求，则进入下一步。

2.在浏览器端判断上次文件返回头中是否含有Etag信息，有则带上If—None—Match字段信息发送请求给服务器，服务器判断Etag未修改则返回304，如果修改则返回200，否则进入下一步。

3.在浏览器端判断上次文件返回头中是否含有Last-Modified信息，有则带上If-Modified-Since字段信息发送请求，服务端判断Last-Modified失效则返回200，有效则返回304。

4.如果Etag和Last-Modified都不存在，则直接向服务器请求内容。

这就是Cache-Control、Etag和Last\_Modified空置请求缓存的主要过程。

--------------------

参考文章：[https://blog.csdn.net/eroswang/article/details/8302191][https_blog.csdn.net_eroswang_article_details_8302191]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

1、Last-Modified

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记(HttpReponse Header)此文件在服务期端最后被修改的时间，格式类似这样：

Last-Modified:Tue, 24 Feb 2009 08:01:04 GMT

客户端第二次请求此URL时，根据HTTP协议的规定，浏览器会向服务器传送If-Modified-Since报头(HttpRequest Header)，询问该时间之后文件是否有被修改过：

If-Modified-Since:Tue, 24 Feb 2009 08:01:04 GMT

如果服务器端的资源没有变化，则自动返回HTTP304（NotChanged.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。

2、Etag工作原理

HTTP协议规格说明定义ETag为“被请求变量的实体标记”（参见14.19）。简单点即服务器响应时给请求URL标记，并在HTTP响应头中将其传送到客户端，类似服务器端返回的格式：

Etag:“5d8c72a5edda8d6a:3239″

客户端的查询更新格式是这样的：

If-None-Match:“5d8c72a5edda8d6a:3239″

如果ETag没改变，则返回状态304。

即:在客户端发出请求后，HttpReponse Header中包含Etag:“5d8c72a5edda8d6a:3239″标识，等于告诉Client端，你拿到的这个的资源有表示ID：5d8c72a5edda8d6a:3239。当下次需要发Request索要同一个URI的时候，浏览器同时发出一个If-None-Match报头(Http RequestHeader)此时包头中信息包含上次访问得到的Etag:“5d8c72a5edda8d6a:3239″标识。If-None-Match:“5d8c72a5edda8d6a:3239“，这样，Client端等于Cache了两份，服务器端就会比对2者的etag。如果If-None-Match为False，不返回200，返回304(Not Modified) Response。

3、Expires

给出的日期/时间后，被响应认为是过时。如Expires:Thu, 02 Apr 2009 05:14:08 GMT

需和Last-Modified结合使用。用于控制请求文件的有效时间，当请求数据在有效期内时客户端浏览器从缓存请求数据而不是服务器端.当缓存中数据失效或过期，才决定从服务器更新数据。

4、Last-Modified和Expires

Last-Modified标识能够节省一点带宽，但是还是逃不掉发一个HTTP请求出去，而且要和Expires一起用。而Expires标识却使得浏览器干脆连HTTP请求都不用发，比如当用户F5或者点击Refresh按钮的时候就算对于有Expires的URI，一样也会发一个HTTP请求出去，所以，Last-Modified还是要用的，而且要和Expires一起用。

5、Etag和Expires

如果服务器端同时设置了Etag和Expires时，Etag原理同样，即与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的Last-Modified,Etag值完全一样；在完全匹配If-Modified-Since和If-None-Match即检查完修改时间和Etag之后，服务器才能返回304。

6、Last-Modified和Etag

分布式系统里多台机器间文件的last-modified必须保持一致，以免负载均衡到不同机器导致比对失败

分布式系统尽量关闭掉Etag(每台机器生成的etag都会不一样)

Last-Modified和ETags请求的http报头一起使用，服务器首先产生Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改，来决定文件是否继续缓存

过程如下:

1.客户端请求一个页面（A）。
    
    2.服务器返回页面A，并在给A加上一个Last-Modified/ETag。
    
    3.客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。
    
    4.客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。
    
    5.服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。

注：

1、Last-Modified和Etag头都是由WebServer发出的HttpReponse Header，WebServer应该同时支持这两种头。
    
    2、WebServer发送完Last-Modified/Etag头给客户端后，客户端会缓存这些头；
    
    3、客户端再次发起相同页面的请求时，将分别发送与Last-Modified/Etag对应的HttpRequestHeader:If-Modified-Since和If-None-Match。我们可以看到这两个Header的值和WebServer发出的Last-Modified,Etag值完全一样；
    
    4、通过上述值到服务器端检查，判断文件是否继续缓存；

7、关于 Cache-Control: max-age=秒 和 Expires

Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求）  
max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。

如果max-age和Expires同时存在，则被Cache-Control的max-age覆盖。

Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

Expires =max-age + “每次下载时的当前的request时间”

所以一旦重新下载的页面后，expires就重新计算一次，但last-modified不会变化 。

ck …器信息浏览 f、

[https_blog.csdn.net_an1090239782_article_details_78166983_etag]: https://blog.csdn.net/an1090239782/article/details/78166983#%E5%8D%81%E4%B8%89%E9%85%8D%E7%BD%AEetag
[https_www.cnblogs.com_caiyanhu_p_6931624.html]: https://www.cnblogs.com/caiyanhu/p/6931624.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220418/b79390a789f24bbf94d034aad3db48ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220418/bb4f3628aa8d4a2a9c7466da73d95322.png
[https_www.cnblogs.com_zhutao_p_6690198.html]: https://www.cnblogs.com/zhutao/p/6690198.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220418/738f5ce007d145ad8fd57d16dd08cad7.png
[https_www.jianshu.com_p_f331d5f0b979]: https://www.jianshu.com/p/f331d5f0b979
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220418/ad92d4461cac4940977240476229481e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220418/6dc11b1aa55b46049681ad72b05a57c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220418/77264c055ad94ac8869667eeb4184469.png
[https_blog.csdn.net_eroswang_article_details_8302191]: https://blog.csdn.net/eroswang/article/details/8302191
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220418/bdf1bd2e0ff74769be5bd264c2b6010f.png