标题虽然叫HTTP缓存，但叫浏览器缓存也可以，HTTP算是君子，浏览器算是小人，君子动口定下协议，小人动手实现协议。

 

缓存概念

 

先看一下缓存的目的，主要还是基于性能的考虑

 

缓存减少了冗余的数据传输，节省了你的网络费用

 

缓存缓解了网络瓶颈的问题，不需要更多的带宽就能够更快地加载页面

 

缓存降低了对原始服务器的要求，服务器可以更快地响应，避免过载的出现

 

缓存降低了距离时延，因为可能是从CDN或者代理服务器拿到缓存，这样子比原始服务器可能更快

 

整个Web应用可不只有HTTP缓存，还有代理服务器缓存、CDN缓存，另外后端有自己的应用逻辑缓存、数据库缓存等，反正就秉持一个原则，能利用缓存的就尽量利用缓存，用空间换时间。

 

针对缓存同时还有缓存雪崩、缓存穿透、缓存击穿等概念，这里不展开细述。

 

不过对于一个前端人员来说，可以把精力主要放在HTTP缓存上，该机制和浏览器狼狈为奸[狗头]，提高了Web应用的性能。

 

long long ago

 

先从过去讲起，这里介绍已经过时的用法，有个概念即可

 

在HTTP1.0里使用的是Expires头，现在的一些工具、框架里，比如nginx配置expires 1d后，也会自动帮你把这个Expires头给带上，但其实当有Cache-Control头存在的时候，Expires是不起作用的。

 

我们看一个Expires 头的实际例子

 

expires: Tue, 14 Dec 2021 10:56:15 GMT

 

注意两个地方，一个是它使用了绝对时间，另一个是时间的精确度是秒级，那么就存在两个问题，一个是绝对时间可能在操作系统时间修改或者跨时区（服务器在一个时区，浏览器在另一个时区）的情况下出现问题，另一个就是万一秒级的精确度还不够，在一秒内发生资源变化呢？

 

还有一个遗留的缓存有关的HTTP头是Pragma，它只能被设置为no-cache，效果和Cache-Control: no-cache 一样

 

Pragma: no-cache

 

别看Pragma是一个遗老遗少，但它的优先级比较高，也即是Pragma > Cache-Control > Expires