http缓存详解，http缓存推荐方案

前言

经过本文，你将了解到http缓存机制是怎样的，no-cache到底有没有缓存，地址栏回车，F5，ctrl+F5的区别，以及当下较为推荐的缓存方案等。

自从和前端组的同事一块儿整了个前端扫盲计划，想着给他们讲点什么，花了一周时间整理了http缓存的知识，花了一个多小时也算帮同事们从新理了理这玩意。本文借用了部分优秀文章的思路，这里就当一个整理分享了。

那么咱们开始~

说明

阅读前提：http缓存主要针如css，js，图片等更新频率不大的静态文件。

首先得先明确这个概念，否则如下的概念以及例子，都会显得不太有意义，或者不是那么完美。

1、http缓存请求相应头

阅读本文，先大概了解这些缓存字段是必须的，后面也会细说，先留个印象。

1.Cache-Control
请求/响应头，缓存控制字段，能够说是控制http缓存的最高指令，要不要缓存也是它说了算。

它有如下经常使用值

　　1.1 no-store：全部内容都不缓存

　　1.2 no-cache：缓存，可是浏览器使用缓存前，都会请求服务器判断缓存资源是不是最新，它是个比较高贵的存在，由于它只用不过时的缓存。

　　1.3  max-age=x(单位秒) 请求缓存后的X秒再也不发起请求，属于http1.1属性，与下方Expires(http1.0属性)相似，但优先级要比Expires高。

　　1.4 s-maxage=x(单位秒) 代理服务器请求源站缓存后的X秒再也不发起请求，只对CDN缓存有效(这个在后面会细说)

　　1.5 public 客户端和代理服务器(CDN)均可缓存

　　1.6 private 只有客户端能够缓存

2.Expires
响应头，表明资源过时时间，由服务器返回提供，GMT格式日期，是http1.0的属性，在与max-age(http1.1)共存的状况下，优先级要低。
3.Last-Modified
响应头，资源最新修改时间，由服务器告诉浏览器。
4.if-Modified-Since
请求头，资源最新修改时间，由浏览器告诉服务器(其实就是上次服务器给的Last-Modified，请求又还给服务器对比)，和Last-Modified是一对，它两会进行对比。
5.Etag
响应头，资源标识，由服务器告诉浏览器。
6.if-None-Match
请求头，缓存资源标识，由浏览器告诉服务器(其实就是上次服务器给的Etag)，和Etag是一对，它两会进行对比。

2、为何要使用HTTP缓存

假设咱们请求一次服务器，请求头大小1kb，响应头大小1kb，请求文件10kb。

1次请求流量：12kb

10次请求流量：120kb

N次请求：12*N....

这只是假想的一次请求，但事实上的请求不只是请求文件，请求客户端也会更多，那么问题就很明显：

1.客户端每次都要请求服务器，浪费流量(好比手机端？)。

2.服务器每次都得提供查找，下载，请求用户基础若是较大，服务器存在较大压力。

3.客户端每次请求完都要进行页面渲染，用户体验较差。

那么咱们是否能够将请求的文件存放起来使用，好比使用http缓存。

3、使用http缓存

1.让服务器与浏览器约定一个文件过时时间——Expires(GMT时间格式)。

平常请求对话

第一次请求

浏览器：服务器服务器，我如今须要一个a.js文件，帮我找找，而后给我。

服务器：次次找我要，烦不烦，文件给你能够，咱们约定个时间(Expires)，时间没到别来烦我了，返回了a.js以及过时时间Expires。

后续请求.....

浏览器会先对比当前时间是否已经大于Expires，也就是判断文件是否超过了约定的过时时间。

时间没过，不发起请求，直接使用本地缓存。

时间过时，发起请求，继续上述的浏览器与服务器的谈话平常。

问题：假设Expires已过时，浏览器再次请求服务器，但a.js相比上次并未作任何改变，那此次请求咱们是否经过某种方式加以免？

2.让服务器与浏览器在约定文件过时时间的基础上，再加一个文件最新修改时间的对比——Last-Modified与if-Modified-Since

平常请求对话

第一次请求

浏览器：服务器服务器，我如今须要一个a.js，你找到了给我，顺便给我个过时时间，时间没到我保证不烦你！

服务器：哈卖批，行，过时时间我给你，另外再给你一个文件最新修改时间Last-Modified，到时候文件过时了咱两核对文件修改时间，对得上你就别烦我，返回a.js+Expires+Last-Modified。

后续请求....

Expires未过时，浏览器机智的使用本地缓存，省得挨打。

Expires过时，服务器带上了文件最新修改时间if-Modified-Since(也就是上次请求服务器返回的Last-Modified)，服务器将if-Modified-Since与Last-Modified作了个对比。

if-Modified-Since 与Last-Modified不相等，服务器查找了最新的a.js，同时再次返回Expires与全新的Last-Modified

if-Modified-Since 与Last-Modified相等，服务器返回了状态码304，文件没修改过，你仍是用你的本地缓存。

以下图，请求头与响应头文件修改时间相同，因此返回了304，使用本地缓存：

 

 问题：浏览器端能够随意修改Expires，Expires不稳定，Last-Modified只能精确到秒，假设文件是在1s内发生变更，Last-Modified没法感知到变化，这种状况下浏览器永远拿不到最新的文件(假想极端状况)。

3.让服务器与浏览器在过时时间Expires+Last-Modified的基础上，再增长一个文件内容惟一对比标记——Etag与If-None-Match。哦对了，咱们说Expires不稳定，这里咱们再加入一个max-age来加以代替(cache-control其中一个值)。

平常对话

第一次请求

浏览器：服务器服务器，你懂得~~~~~~

服务器：我不懂！a.js我给你，过时时间我也给你，再给你一个max-age=60(单位秒)，Last-Modified你也给我收好，再加一个文件内容惟一标识符Etag。

后续请求....

60S内，不发起请求，直接使用本地缓存。（max-age=60表明请求成功缓存后的60S内再也不发起请求，与Expires类似，同时存在max-age优先级要比Expires高，区别后面具体说）

60S后，浏览器带上了if-Modified-Since 与If-None-Match(上次服务器返回来的Etag)发起请求，服务器对比If-None-Match与Etag(不对比if-Modified-Since与Last-Modified了，Etag优先级比Last-Modified高，毕竟更精准)

If-None-Match与Etag不相等，说明a.js内容被修改过，服务器返回最新a.js与全新的Etag与max-age=60与Last-Modified与Expires

If-None-Match与Etag相等，说明a.js文件内容无任何改变，返回304，告诉浏览器继续使用以前的本地缓存。

以下图，服务器Etag与If-None-Match相同，因此返回了状态码304，因为优先级问题，虽然也有if-Modified-Since与Last-Modified，但这里不会对二者作对比。

问题：咱们已经能够精确的对比服务器文件与本地缓存文件差别，但其实上面方案的演变都存在一个较大缺陷， max-age或Expires不过时，浏览器没法主动感知服务器文件变化。

4、http缓存方案

1.md5/hash缓存

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

为何这么作？实现原理是什么？

咱们前面说的http缓存方案，服务器与浏览器的文件修改时间对比，文件内容标识对比，前提基础都是创建在二者文件路径彻底相同的状况下。

module/js/a-hash1.js与module/js/a-hash2.js是两个彻底不一样的文件，假想浏览器第一次加载页面，请求并缓存了module/js/a-hash1.js，第二次加载，文件指向变成了module/js/a-hash2.js，浏览器会直接从新请求a-hash2.js，由于这就是两个彻底不一样的文件，哪里还有什么http缓存文件对比，t经过这种作法，咱们就能够从根本上解决过时时间没到浏览器没法主动请求服务器的问题。所以咱们只须要在项目每次发布迭代将修改过的静态文件添加不一样的MD5或hash标识就好啦。

注意，这里不推荐缓存html文件(或许有更好的作法，欢迎留言)，这样每次html加载渲染均可以感知文件变化，反正文件没变仍是使用本地缓存，文件名都变了说明修改过，从新请求缓存就行了。

怎么改？一个个手动去修改？那不得累死。webpack提供了webpack-md5-hash插件，能够帮助开发者在项目发布时自动修改文件标识。

咱们公司由于用的是fis3打包工具，这里使用的是fis3构建-文件指纹(搜文件指纹)，原理都差很少。

2.CDN缓存(做为了解)

在文章开头cache-control相关值介绍中，提到了例如s-maxage代理服务器的概念，本人在整理http缓存相关知识点时，从同窗口中了解到了也较为推荐的http缓存方案——CDN缓存，这里就做为一个拓展吧，正常的缓存仍是推荐MD5缓存。

2.1什么是CDN

了解CDN缓存，先得知道什么是CDN，CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，经过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，下降网络拥塞，提升用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术(较为官方的说明)。

以前看到一个不错的例子，这里直接拿过来举例说说CDN。

假设多年前咱们所在的城市只有一个火车站，每次春运，整个城市的人都得去这个火车站买票，人流量以及购票的需求可想而知有多大，为了缓解这个问题，城市的不一样区，都出现了火车票代售点，这样每一个区的人均可以就近买票了，火车站总站的压力就这样大大减轻了。

咱们能够把每一个区的售票点称之为CDN节点，也就是前面所说的代理服务器。简而言之，咱们能够把CDN理解成浏览器与服务器之间的临时站点，它会替服务器处理一部分的浏览器请求，从而整理减轻总服务器的压力。

咱们能够把CDN的价值概括为：

1.CDN经过分流的形式，大大减轻源站的访问压力。

2.就像住的区比较偏远，每次买票要去城市中心，而这个区后来有了分站，火车票就能够就近购买同样。CDN也解决了跨地区访问问题，根本上为访问提供了加速。

2.2什么是CDN缓存

CDN边缘节点缓存数据，当浏览器请求，CDN将代替源站判断并处理此处请求。

平常请求对话

第一次请求

浏览器：服务器老哥，我须要a.js.

服务器：（恼羞成怒）文件我给我小弟CDN了，之后你要这个找CDN，别找我了。成功返回a.js给CDN，CDN进行缓存，同时CDN返回给浏览器，浏览器本身也进行了缓存(cache-control的值public就是用在这的)。

后续请求...

浏览器：服务器，我缓存时间到了，赶忙给我对比下文件，看看要不要从新返回给我。

CDN节点：打住打住，叫唤啥呢，我大哥比较忙，文件给我看看，请求被代理了。

状况1：CDN节点本身缓存的文件未过时，因而返回了304给浏览器，打回了此次请求。

状况2：CDN节点发现本身缓存的文件过时了，为了保险起见，本身发起请求给了服务器(源站)，成功拿回了最新数据，而后再交给与了浏览器。

其实说到这，CDN缓存的问题也跟前面的http缓存同样，CDN缓存时间不过时，浏览器始终被拦截，没法拿到最新的文件。

可是咱们回归http缓存问题本质，缓存自己针对于更新频率不高的静态文件，其次，CDN缓存提供了分流以及访问加速其它优点条件。这里我问过同窗，获得的信息是，CDN相似一个平台，是能够经过登陆，手动更新CDN缓存的，变相解决了浏览器缓存没法手动控制的问题。

那么两种http缓存方案就说到这里了，接下来谈谈http缓存其它的一些问题和概念。

5、浏览器地址栏回车，新开窗口，F5刷新，CTRL+F5刷新等浏览器操做对HTTP缓存的影响

在利用fiddler抓包看不一样网站缓存时，发现了一个有趣的问题，大部分网站的cache-control都设置的为no-cache。

我在前面说了，no-cache不是不缓存，要缓存，可是浏览器在协商性缓存状况下，都会无条件像服务器发起请求，判断本身的缓存是否是最新，若是是就接着用，不是就请求最新的文件，缓存起来用，以此循环。

那么有必要设置过时时间Expires与max-age吗？有！

当咱们第一次浏览一个页面，关闭后，第二次再打开仍是属于新开窗口行为，若是设置了缓存时间，新开窗口会走强缓存，能够避免反复的文件下载，加快页面渲染，提高用户体验性。

(其实一开始我是以为Expires与max-age是不须要设置的，直到我使用pageSpeed对公司网站作了个性能评分，发现仍是推荐使用缓存时间，结合上面的话，实际上是有道理的)

 

对于上面的话不理解不要紧，这里结合百度百科与其它博客的概念，咱们对浏览器的不一样行为对缓存的影响作一个总结。

1.浏览器地址栏回车，或者点击跳转按钮，前进，后退，新开窗口，这些行为，会让Expires，max-age生效，也就是说，这几种操做下，浏览器会判断过时时间，再考虑要不要发起请求，固然Last-Modified和Etag也有效。

2.F5刷新浏览器，或者使用浏览器导航栏的刷新按钮，这几种，会忽略掉Expires，max-age的限制，强行发起请求，Last-Modified和Etag在这种状况下也有效。

3.CTRL+F5是强制请求，全部缓存文件都不使用，所有从新请求下载，所以Expires，max-age，Last-Modified和Etag所有失效。

但事实上，咱们不多用到地址栏回车，地址栏跳转，因此要触发缓存时间的判断，还须要特定的操做，站在个人理解，综合考虑下，才有了这么多网站的cache-control设置为no-cache，也就是使用缓存前都判断文件是否为最新，更为合理。

6.强缓存与协商性缓存(弱缓存)

了解了上面不一样浏览器行为对http缓存的不一样影响，理解强缓存与协商性缓存就很容易了。

强缓存：不发起http请求，直接使用本地缓存，好比浏览器地址栏回车，使用浏览器的刷新按钮，在Expires或max-age生效的状况下，触发的都是强缓存。

协商性缓存(弱缓存)：在使用本地缓存前，先与服务器协商，核对缓存文件是否为最新。好比设置了cache-control=no-cache，无论你作任何操做，都会发起请求，这一类就是协商性缓存了。

7.max-age和Expires的区别

在用fiddler抓包的时候，发现很多网站同时设置了max-age和Expires，为毛要设置两个，功能不都差很少吗，二者区别是啥？

1.max-age是http1.1的属性，Expires是http1.0的属性，为了作到向下兼容，通常写两个。但如在1.1环境下，max-age优先级比Expires高。

2.max-age是相对过时时间，Expires是绝对过时时间。max-age在浏览器成功缓存文件后，只需相对请求成功以后的多长时间再也不发起请求就行了，而Expires老是须要服务器返回一个精准的GMT格式的日期，并以这个日期为标准来判断缓存是否过时，想对就比较麻烦，因此才有了max-age这样的存在来代替它。

同理，no-cache和 Pargma也是这样的存在，一个是1.1的属性，一个是1.0，向下兼容，同时写了两个。

好了，说到这里其实介绍的差很少了，了解了这些，浏览器和服务器之间也能过上幸福的生活了。

 

对了，上面抓包工具是fiddler，别找中文版了，不存在的，直接下，官方也有使用说明文档，这里就很少说了。

 

参考资料：

1.面试精选之http缓存

2.CDN缓存那些事