概述

缓存的作用：

1. 加快页面响应速度
2. 减轻服务器的压力
3. 降低网络宽带损耗

控制缓存的方式：

1. HTML Meta 控制，并不是所有浏览器会支持，并未广泛使用
2. HTTP 头信息控制，这是缓存的重点

缓存过程

浏览器发起HTTP请求资源的时候，先检查是否存在缓存的资源，如果不存在则向服务器请求，如果存在则进入检查阶段：

1. 资源是否过期？如果没过期，将会从缓存中返回资源——强缓存；如果过期了，将会发送请求到服务器，进入协商阶段。
2. 在协商阶段，服务器会返回关键信息，用以指示浏览器是否继续使用缓存中的资源，还是重新发起资源请求。

策略机制

强缓存

相关的字段有：Expires 和 Cache-Control。

Cache-Control 是HTTP1.1中的标准，Expires 是HTTP1.0中的标准。

Cache-Control中的max-age会覆盖掉Expires。

Expires

Expires 是服务器端在响应请求时用来规定资源的失效时间。

Cache-Control

Cache-Control 是服务器端在响应请求时用来规定资源是否需要被浏览器缓存以及缓存的有效时间等。

Cache-Control 常用的属性：

1. max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires
2. s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存，而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires.
3. public：响应会被缓存，并且在多用户间共享。默认是public。
4. private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。
5. no-cache: 指定代理服务器不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。
6. no-store: 绝对禁止缓存。
7. must-revalidate: 缓存必须在使用之前验证旧资源的状态，并且不可使用过期资源。

协商缓存

相关的字段有：Last-Modified / If-Modified-Since 和 Etag / If-None-Match。

当两者同时存在时，Etag / If-None-Match 的优先级要高于 Last-Modified / If-Modified-Since。

Last-Modified / If-Modified-Since

Last-modified: 表明请求的资源上次的修改时间。
If-Modified-Since：客户端保留的资源上次的修改时间。

浏览器会在请求服务器的时候带上If-Modified-Since，浏览器接收到If-Modified-Since的时候，会用以跟被请求资源的最后修改时间做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果最后修改时间比较新，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。

Etag / If-None-Match

Etag：资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，只要保证写入和验证时的方法一致即可）
If-None-Match： 客户端保留的资源内容标识。

浏览器会在请求服务器的时候带上If-None-Match，浏览器接收到If-None-Match的时候，会用以跟被请求资源的唯一标识做对比。如果相同，说明资源没有新的修改，则响应 HTTP 304，浏览器会继续使用原先保存的该资源的副本；如果最后修改时间比较新，则说明资源被修改过，则响应 HTTP 200，并且返回最新的资源。

参考

彻底理解浏览器缓存机制
浏览器缓存机制剖析
浏览器缓存机制介绍
Cache-Control