HTTP Header控制缓存

╰半橙微兮° 2022-01-29 02:06 280阅读 0赞

我们经常通过缓存技术来加快网站的访问速度，从而提升用户体验。HTTP协议中也规定了一些和缓存相关的Header，来允许浏览器或共享高速缓存缓存资源。这些Header包括：

*  Last-Modified 和 If-Modified-Since
 *  ETag 和 If-None-Match
 *  Expires
 *  Cache-Control

以上Header又可以分成两种类型：

*  协商缓存：浏览器发送验证到服务器，由服务器决定是否从缓存中读取，如 1 和 2 。
 *  强缓存：浏览器验证缓存的有效性，然后决定是否从缓存中读取数据，如 3 和 4 。

本文将会分别介绍这四种配置的作用以及可能产生的影响。

### 　　**1、Last-Modified 和 If-Modified-Since** ###

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

If-Modified-Since：浏览器再次发送请求时，会通过此Header通知服务器在上次请求时所得到的资源最后修改时间。服务器会将If-Modified-Since与被请求资源的最后修改时间进行比对。若资源的最后修改时间晚于If-Modified-Since，表示资源已被改动，则响最新的资源，返回200状态码；若资源的最后修改时间早于或等于If-Modified-Since，表示浏览器端的资源已经是最新版本，响应304状态码，通知浏览器继续使用缓存中的资源。

### 　　**2、ETag 和 If-None-Match** ###

ETag：服务器分配给资源的唯一标识符，资源被修改后，ETag也会随之发生变化。

If-None-Match：浏览器再次发送请求时，会通过此Header通知服务器已缓存资源的ETag。服务器会将If-None-Match与被请求资源的最新ETag进行比对。若不相同，表示资源已被改动，则响应最新的资源，返回200状态码；若值相同，则直接响应304状态码，通知浏览器继续使用缓存中的资源。

### 　**　3、Expires** ###

服务器可以通过此Header向浏览器传递一个具体的时间（格林威治格式，例如：Thu, 19 Jul 2018 07:43:05 GMT） ，来明确地宣告资源的有效期。在资源过期之前，浏览器不再发送请求，而是直接从缓存中读取数据。只有当资源过期之后，浏览器才会再次向服务器请求该资源。

### 　　**4、Cache-Control** ###

服务器使用此Header来向客户端建议缓存策略，它有一下几个可选值：

max-age=秒：告知浏览器缓存的有效时长，在该时间内浏览器将直接从缓存中读取数据。

s-maxage=秒：作用同max-age，但是只对共享高速缓存（如CDN）有效，对浏览器无效。

no-cache：告知浏览器不要直接使用缓存，而是必须向服务器发送请求。

no-store：告知浏览器不要缓存本次请求和响应的任何信息。

public：宣告任何缓存媒介都可以缓存该响应。

private：宣告该响应只允许个体客户端（如浏览器）去缓存，而不允许共享高速缓存（如CDN）去缓存。

在上面的介绍中我们了解到浏览器会根据max-age设置的时间进行缓存。而通过研究发现CDN也会识别源站响应头中Cache-Control属性，根据max-age设置的时间进行缓存，但是，如果源站同时设置了s-maxage和max-age，那么CDN会优先采用s-maxage。

下面通过图例来展示一下这些可选值的效果。

首先了解一下浏览器是怎样根据max-age进行缓存的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70][]

从上图不难发现，服务器在Header中返回了Cache-Control: max-age=100后，浏览器成功缓存100秒，该时间段内的请求都从直接以本地缓存来响应。

那么，服务器在Header中返回Cache-Control:s-maxage=100时，又会对浏览器产生什么样的影响呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 1][]

如上图所示，浏览器没有采取任何缓存策略，这是因为s-maxage面向的是共享高速缓。

上面这两个例子很容易理解，在现实世界中，为了加快网站响应速度，我们可能会在浏览器和服务器之间引入CDN服务。浏览器的请求会先到达CDN，然后CDN判断是从缓存中读取数据还是回源到服务器。接下来，让我们看看max-age和s-maxage会对CDN的缓存策略带来哪些影响。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 2][]

可以看出CDN也会利用max-age来缓存，所以在100秒内强制刷新浏览器时，CDN会直接用缓存来响应。

如果服务器使用了s-maxage又会如何呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 3][]

不难发现CDN对max-age和s-maxage采取了同样的缓存策略，但浏览器并不会根据s-maxage来进行缓存。

CDN供应商的特殊规则

我们分别测试了阿里云和腾讯云的CDN对Cache-Control的支持情况，发现他们都有一些独特的规则。阿里云CDN可以在控制台里设置Cache-Control，该设置会覆盖源服务器的Cache-Control。

腾讯云CDN虽然没有再控制台提供覆盖Cache-Control的功能，但其规则却一点也不简单，在使用的时候一定要特别注意：

*  服务器和CDN均不对缓存进行配置时，CDN会采用默认的缓存机制（静态文件缓存30天，动态请求不缓存）；
 *  CDN配置缓存机制（但并未开启高级缓存配置）且服务器设置Cache-Control: s-maxage=200,max-age=100时，CDN会按照其控制台设置的规则进行缓存，浏览器则按照max-age进行缓存；
 *  服务器不设置Cache-Control时，CDN会自动在响应的Header中添加Cache-Control: max-age=600，这就会让浏览器将该资源缓存600秒；
 *  服务器设置为禁用缓存时，CDN和浏览器均不进行缓存；
 *  服务器设置Cache-Control: s-maxage=200,max-age=100并开启CDN的高级缓存配置时，CDN会从s-maxage和控制台中设置的缓存时间中选择最小值来作为缓存时间，而浏览器则始终使用max-age；
 *  服务器设置Cache-Control:max-age=100并开启CDN的高级缓存配置时，CDN会从max-age和控制台中设置的缓存时间中选择最小值来作为缓存时间，不影响浏览器的缓存策略。
 *

### 　**　组合使用** ###

如果同时设置了这些Header，浏览器和高速共享缓存会按照下面的优先级进行缓存：

Cache-Control > Expires > ETag > Last-Modified

也就是说，Cache-Control不仅是强缓存，而且拥有最高的优先级，我们可以为不经常发生变化的资源应用该Header来提升响应时间。

### 　**　在Ada中使用缓存** ###

Ada提供了UI脚手架和API脚手架，这两类脚手架的服务器端入口文件分别为index.server.js和index.js，我们只需要在入口文件的请求处理函数中为响应添加适当的Header，即可通知客户端进行响应的缓存，比如：

`　　// 设置CDN缓存300秒，浏览器缓存200秒``ctx.response.headers.set('Cache-Control',public,s-maxage=300,max-age=200)`

在为请求添加缓存Header之前，应该先为其制定适当的缓存策略，需要考虑该URL是否适合缓存（数据是否特定于用户）以及需要缓存的时长等等。

### **　　总结** ###

通过使用这些HTTP Header，我们可以主动影响浏览器甚至CDN的缓存策略，从而减少请求数量，提升网页性能，减轻服务器压力。

Ada的灵活机制能让我们为不同的URL设置不同的缓存策略，能够更有针对性地进行主动缓存。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70]: /images/20220129/644384bd87954987acd1b6080dbad551.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 1]: /images/20220129/be8b5bb89bc54f8db7d9ba16df45bc11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 2]: /images/20220129/f10f78587b704f5a935e9e456cdf738c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Fzc2FzaW4wMzA4_size_16_color_FFFFFF_t_70 3]: /images/20220129/c2f3e775b6924db180e86d2f52463a06.png