Arthur's Blog

稍微了解HTTP协议的前端同学，想必对Cache-Control不会感到陌生，性能优化时经常都会跟它打交道。

常见的值有有private、public、no-store、no-cache、must-revalidate、max-age等。

各个取值所代表的含义，网上总结挺多的，这里就不打算再进行逐一介绍，感兴趣的可以一起探讨交流。

本文仅挑no-cache、must-revalidate 这两个进行值进行探究对比。在项目实践中，这两个值用的比较多，也比较容易搞混。

Cache-Control: no-cache
Cache-Control: max-age=60, must-revalidate

传送门：RFC2616关于Cache-Control首部的介绍。

no-cache、must-revalidate简介

• no-cache: 告诉浏览器、缓存服务器，不管本地副本是否过期，使用资源副本前，一定要到源服务器进行副本有效性校验。
• must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。

上面的介绍涉及三个主体：浏览器、缓存服务器、源服务器。下面小节会简单进行介绍。

浏览器、缓存服务器、源服务器

• 浏览器：资源请求直接发起方。
• 源服务器：资源实际提供方。
• 缓存服务器：在浏览器、源服务器之间架设的中间服务器，由它代替浏览器，向源服务器发起资源请求；

缓存服务器作用如下。缓存服务器不是必须的，浏览器可也可与源服务器直接通信。

加速资源访问速度，降低源服务器的负载。缓存服务器从源服务器获取资源，并返回给浏览器。此外，缓存服务器一般还会在本地保存资源的副本，当有相同的资源请求到来，缓存服务器可返回资源副本，以此提高资源访问速度。

对比测试场景、环境准备

对比测试场景

下文会通过以下两种场景的对比测试，来探究no-cache、must-revalidate的区别。

1. 浏览器 直接访问 源服务器。
2. 浏览器 通过 缓存服务器，间接访问 源服务器。

环境准备

• 操作系统：OSX 10.11.4
• 浏览器：Chrome 52.0.2743.116 (64-bit)、Firefox 49.0.2
• 缓存服务器：Squid 3.6
• 源服务器：Express 4.14.0

1、下载实验代码：可以访问github主页获取，也可通过git clone下载到本地。

git clo