image：缓存有效期为3600秒（）指定设置

image：缓存有效期为3600秒（）指定设置

　　图片

　　稍微解释一下：

　　1.缓存控制

　　max-age（单位：s）指定设置缓存的最大有效时间，定义了时间的长短。浏览器向服务器发送请求后，在 max-age 期间，浏览器将不再向服务器发送请求。找个资源看看吧。比如QQ推广上的css资源，max-age=3600，表示缓存有效期为3600秒（即1h）。所以这个版本的资源会在1天内用完，即使服务器上的资源发生变化，浏览器也不会收到通知。 max-age 会覆盖 Expires，后面会讨论

　　图片

　　s-maxage（单位：s）与max-age相同，仅用于共享缓存（如CDN缓存）。比如s-maxage=60时，在这60秒内，即使CDN内容更新，浏览器也不会发起请求。也就是说，max-age用于普通缓存，s-maxage用于代理缓存。如果存在 s-maxage，则 max-age 和 Expires 标头将被覆盖。

　　public 指定响应将被缓存并在多个用户之间共享。这就是下图的意思。如果未指定 public 或 private，则默认为 public。

　　图片

　　私有响应仅用作私有缓存（见下图），不能在用户之间共享。如果需要HTTP认证，响应会自动设置为private

　　图片

　　no-cache 指定不缓存响应，表示不缓存资源，但设置 no-cache 并不代表浏览器不缓存，而是向服务器确认资源是否已经被缓存在获取缓存之前更改。因此，有时设置 no-cache 来防止缓存是不够的。也可以添加私有命令，将过期时间设置为过去时间。

　　no-store 绝对禁止缓存。乍一看就知道，如果使用这个命令，当然是不会被缓存的。每次请求资源时，都必须从服务器重新获取。

　　must-revalidate 指定如果页面过时，去服务器获取。这个指令不常用，就不多说了。

　　cache-control 的种类太多了，但是如何使用，请参考下图：

　　图片

　　2. 过期

　　缓存过期时间，用于指定资源过期的时间，是服务器端的一个具体时间点。也就是说Expires=max-age+请求时间，需要和Last-modified配合使用。但是正如我们上面提到的，缓存控制具有更高的优先级。 Expires 是 Web 服务器响应消息的标头字段。在响应http请求时，它告诉浏览器，浏览器可以在过期时间之前直接从浏览器缓存中获取数据，而无需再次请求。

　　图片

　　3. Last-modified & If-modified-since

　　服务端文件的最后修改时间需要和cache-control一起使用，这是检查服务端资源是否更新的一种方式。当浏览器再次发出请求时，它会向服务器发送 If-Modified-Since 头，询问资源是否在 Last-Modified 时间点之后被修改。如果没有修改，返回码为304，使用缓存；如果被修改，服务器将再次请求资源。返回码与第一次请求相同，资源为服务器最新资源。

　　4. Etag & & If-None-Match

　　根据实体内容生成一个hash字符串来标识资源的状态，由服务器生成。浏览器会将此字符串发送回服务器以验证资源是否已被修改。如果没有修改过，流程如下：

　　图片

　　2.2.3 缓存头类型和优先级1. Cache-Control 和 Expires

　　Cache-Control 和 Expires 具有相同的功能。它们都指示当前资源的有效期，并控制浏览器是直接从浏览器缓存中获取数据还是重新向服务器发送请求以获取数据。只是Cache-Control有更多的选择和更详细的设置。如果两者同时设置，则其优先级高于 Expires。

　　2. Last-Modified 和 ETag

　　你可能认为使用 Last-Modified 就足以让浏览器知道本地缓存的副本是否足够新，为什么还需要 Etag（实体标识）？ HTTP1.1中Etag的出现主要是为了解决Last-Modified中难以解决的几个问题：

　　Etag是服务器自动生成或开发者生成的对应资源的服务器端唯一标识，可以更精准的控制缓存。 Last-Modified 和 ETag 可以一起使用。服务器将首先验证 ETag。如果一致，则继续比较Last-Modified，最终决定是否返回304。 Etag服务器生成规则和强弱Etag的相关内容可以参考，《交互式百科全书-Etag》和《HTTP Header定义》 ”，这里不再深入。

　　3. Last-Modified/ETag 和 Cache-Control/Expires

　　在配置Last-Modified/ETag的情况下，如果浏览器再次访问统一URI的资源，仍然会向服务器发送请求，询问文件是否被修改过。如果没有，服务器只会向浏览器回发一个304，告诉浏览器浏览器直接从其本地缓存中获取数据；如果被修改，则将整个数据重新发送到浏览器；

　　Cache-Control/Expires 是不同的。如果在时间范围内检测到本地缓存仍然有效，则浏览器直接使用本地副本，不发送任何请求。两者一起使用时，Cache-Control/Expires的优先级较高，即当根据Cache-Control/Expires发现本地副本在有效期内时，不会再次向本端发送请求服务器询问修改时间 Last-Modified 或 entity Identified Etag。

　　一般情况下，两者会一起使用，因为即使服务器设置了缓存时间，当用户点击“刷新”按钮时，浏览器也会忽略缓存，继续向服务器发送请求，然后Last-Modified/ETag 将能够很好地利用 304 来减少响应开销。

　　2.2.4 哪些请求不能缓存？

　　浏览器无法缓存的请求：

　　3、使用缓存进程

　　当用户发起静态资源请求时，浏览器会通过以下步骤获取并显示资源：

　　图片

　　缓存行为主要由缓存策略决定，缓存策略由内容所有者设置。这些策略主要通过特定的 HTTP 头来明确表达。

　　上述过程也可以概括为三个阶段：

　　本地缓存阶段：首先在本地查找资源，如果找到资源，并且资源没有过期，就会使用这个资源，根本不会向服务器发送http请求；

　　协商缓存阶段：如果在本地缓存中找到了对应的资源，但是不知道该资源是否已经过期或者已经过期，则向服务器发送一个http请求，然后服务器判断请求，如果请求的资源在服务器上没有改变 如果是，返回304让浏览器使用本地找到的资源；

　　缓存失败阶段：当服务器发现请求的资源被修改了，或者这是一个新的请求（原来没有找到资源），服务器返回资源的数据，返回200。当然，这个指找到的资源，如果服务器上没有这样的资源，会返回404。

　　4、用户操作行为与缓存的关系

　　用户在使用浏览器时，会出现输入地址回车、按F5刷新等各种操作，这些行为对缓存有什么影响？

　　图片

　　从上表可以看出，当用户按F5刷新时，会忽略Expires/Cache-Control设置，再次向服务器发送请求，Last-Modified/Etag依然是有效，服务器会根据情况返回304或200；

　　当用户使用Ctrl+F5进行强制刷新时，所有的缓存机制都会失效，重新从服务器拉取资源。

　　5、如何从缓存的角度改进网站

　　——网上大部分帖子深度不一，甚至有的还前后矛盾。下面的文章是学习过程的总结。如有发现错误请留言指出~

　　参考：

　　网页缓存机制系列：

　　谈论网络缓存：

　　Web 前端和后端缓存技术：