在面试中，我们经常会被问到怎样优化页面加载速度，显而易见，最好的办法就是不通过网络下载资源，直接在本地磁盘获取内容。于是我们引入缓存，请求可以从缓存中直接获取目标数据并返回，有效提升响应速度。
每个浏览器都自带了 HTTP 缓存实现功能。我们只需要确保每个服务器响应都提供正确的 HTTP 头部字段，以指示浏览器何时可以缓存响应以及可以缓存多久。下面介绍四种常见的设置缓存方式：
- Cache-control
Cache-Control 指令控制谁在什么条件下可以缓存响应以及可以缓存多久。
在消息头里设置Cache-control：
Cache-control:cache-directive
作为请求首部时，cache-directive 的可选值有：
FkctxGN8VXdie7M8Fbx6U5Bpfi4c.png
作为响应首部时，cache-directive 的可选值有：
FixnilG9OWm4w4qUNZGKSkYXZ4gu.jpg
举例：
Cache-control:public，max-age = 3600
这条指令意味着该资源是从原服务器上取得的，缓存有效时间为一小时，在这一小时之内用户都不需要向服务器重发该请求，可以直接从内存里读取该资源。
- Expires
Expires 指定了一个日期/时间， 在这个时间之前，发送的请求不需要向服务器访问，直接使用缓存资源，超出这个时间，HTTP响应就被认为是过时的；
例如：
Expires:Mon, 19 Jun 2017 08:17:23 GMT
注意：Expires的时间格式是格林威治时间（GMT），使用的是绝对时间。
- Last-modified
Last-modified标记这个资源在服务期端最后被修改的时间。
例如：
Last-modified:Mon, 19 Jun 2017 08:17:23 GMT
浏览器可以根据这个时间自己设置是否缓存以及还存多久（每个浏览器对此的理解不同）。假如这个时间距离现在已经有一年，那么说明此资源已经很久没被更新，那么可以考虑缓存。
Etag
Etag所携带的内容是一个随机的标识符（哈希值或某个其他指纹），这个标识符是服务器生成的，浏览器不需要关心这个标识符是怎样生成的，只需要在下一次发起同样请求时带上这个Etag字段，服务器会检查这个Etag，如果与上次的相同，服务器会返回304（Not Modified），则表示资源未发生变化，浏览器就可以跳过下载，直接使用本地缓存。如果与上次的不相同，那么直接返回 GET 200形式将新的资源（当然也包括了新的ETag）发给客户端；
示例：
Etag: "5d8c72a5edda8d6a:3239"
那么客户端是如何把标记在资源上的 ETag 传回给服务器的呢？
只需要在请求里加入两个Etag值
- If-None-Match
If-None-Match: "5d8c72a5edda8d6a:3239"
这条指令意味着如果 ETag 没匹配上就重发新的资源数据，否则返回送304 和响应头。当前各浏览器均是使用的该请求头来向服务器传递保存的 ETag 值。
- If-Match
告诉服务器如果没匹配到ETag，或者收到了“*”值而当前并没有该资源实体，则应当返回412(Precondition Failed) 状态码给客户端。否则服务器直接忽略该字段。
总结
- Cache-control、Expires存在版本问题，如果在到期以前更新了资源浏览器无法知道。
- Expires使用的是绝对时间，如果服务器与浏览器时间不一样，可能会出现问题。
关于缓存，更详细的总结可以看HTTP缓存控制小结
网友评论